opened
chapterjason
username_0
<!--
Thanks for your interest in contributing to Popper.js!  
Please, make sure to fill all the sections of the template before submitting any issue. 

Issues without the required informations will be closed.
Do not delete this template or it will be closed!

Want your issue to be fixed earlier? Create a PR that introduces a CI test that fails
because of the bug you found!
-->

### CodePen demo

<!--
Use this CodePen template to allow the contributors to easily reproduce your problem.  
-->

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

https://github.com/username_0/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?

<!-- Describe what you would have expected. -->

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?

<!-- Describe what went wrong. -->

The `index.d.ts` _the typings_ went wrong for `amd`.

### Any other comments?

<!-- Any additional information. -->
RequireJS, TypeScript and Popper
issue
created
FezVrasta
username_1
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.
comment
closed
FezVrasta
username_1
issue
created
chapterjason
username_0
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
comment
created
mikila85
username_2
@username_0,  did you solve this successfully?
how can i make this work? i am getting the same error as you did (TS+NG5)
comment
created
Znow
username_3
Getting the same error aswell...
comment
created
HarryGogonis
username_4
I got it working in a hacky way by using `any`. Of course, this pretty much removes all typescript benefits.

```js
import * as PopperJS from 'popper.js';
...
const P: any = PopperJS;
this.popperInstance = new P(..);
```
comment
created
chapterjason
username_0
@username_1 it looks like the issue is getting more popular. I didn't rember if I got any solution, but I will try it later and will provide a pr
comment
created
kadet1090
username_5
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/username_5/b11d4dbe794f6016cb826b516e1fd45b

And then i can require it via:
```ts
/// <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.
comment
created
zedL
username_6
@username_5 thanks a lot! you saved my day.
comment
created
janus007
username_7
Also mine :)
You should do a PR.

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