Popper-core: RequireJS, TypeScript and Popper

[FezVrasta]

I don't know TypeScript, but in JS import Popper = require('popper.js'); is syntax error, it should be const Popper = require('popper.js')

Regarding your problem, I would probably ask on the repository of the bundler you are using, since Popper.js loads just fine on all the other user's projects.

I'm sorry but I don't think I'm able to help you further.

[chapterjason]

I think you misunderstood me. The index.d.ts is incompatible with the umd version.

As you can see there is only one "_export_"

(function(global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
        (global.Popper = factory());
}(this, (function() {
    var Popper = function() {
        [...]
    }();
    return Popper;
})));

module.exports = factory() or define(factory) or factory() will always return the constructor.

In the index.d.ts you've got the following.

declare module 'popper.js' {
  export default Popper;
}

And it is not correct in comparsion to the documentation https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-class-d-ts.html

~Also what I found was the following. I saw that Popper use rollup with babel. In this documentation you can see that the result to umd is another as here in Popper.
https://babeljs.io/docs/plugins/transform-es2015-modules-umd/~

A closer look I saw that Popper use rollup with output format umd.
Line https://github.com/rollup/rollup/blob/152afb9732975188c7f4bf716c143da549afd432/src/finalisers/umd.js#L60 to https://github.com/rollup/rollup/blob/152afb9732975188c7f4bf716c143da549afd432/src/finalisers/umd.js#L64 is the code that will be injected. But it doesnt supports default exports. It seems that is a issue of rollup....

[mikila85]

@chapterjason, did you solve this successfully?
how can i make this work? i am getting the same error as you did (TS+NG5)

[Znow]

Getting the same error aswell...

[HarryGogonis]

I got it working in a hacky way by using any. Of course, this pretty much removes all typescript benefits.

import * as PopperJS from 'popper.js';
...
const P: any = PopperJS;
this.popperInstance = new P(..);

[kadet1090]

It's quite a shame that this issue is not fixed, and yet still occurring because of improper type definitions. My fix consist of "own" typings: https://gist.github.com/kadet1090/b11d4dbe794f6016cb826b516e1fd45b

And then i can require it via:

/// <reference path="./types/popper.js.d.ts" />
import Popper = require("popper.js");

The first line is actually quite important because it tells typescript to use my typings instead of those provided with package.

[zedL]

@kadet1090 thanks a lot! you saved my day.

[janus007]

Also mine :)
You should do a PR.

And why on earth is this issue marked as closed?

Sometimes I'm having a hard time understanding why the majority of developers still uses plain JS, instead of TS ;)