RequireJS, TypeScript and Popper

CodePen demo

I’ve created a test project to reproduce the issue.

~~https://github.com/chapterjason/proper-issue~~

Steps to reproduce the problem

Im currently starting to use popper.js in my project. The first issue I’ve got that I can’t importing files that ends with .js in require.js (https://github.com/requirejs/requirejs/issues/1560). I could resolving this with adding a mapping instead of a path.

I tried now to import popper with import Popper from 'popper.js'; which ends up in TypeError: popper_js_1.default is not a constructor in the browser. I also tried the other import style import Popper = require('popper.js'); but this ends up in the following semantic errors on the TypeScript compilation:

.....ts(..,..): error TS2694: Namespace ''popper.js'' has no exported member 'PopperOptions'.
.....ts(..,..): error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.

What is the expected behavior?

After looking in https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.js I expected no semantic errors, cause define(factory) returns the Popper function and not a multiple exports module.

What went wrong?

The index.d.ts the typings went wrong for amd.

Any other comments?

[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.

[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…