Unable to import Peer in Angular application

[Pacific112]

Issue #479 is still present. I am using version 0.3.20 of peerjs. To reproduce:

• create new Angular app ng new app
• npm install --save peerjs
• edit app.component.ts file:

import * as Peer from 'peerjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  ngOnInit(): void {
    new Peer('123', {})

  }
}

• npm start
  Result will be: ERROR TypeError: peerjs__WEBPACK_IMPORTED_MODULE_2__ is not a constructor

[tetriminoss]

Can confirm, tried peerjs on Ionic 4 (which i assume running Angular 6) with the same import method

[pReya]

Have the same problem using Webpack and CreateReactApp. Seems to be a new problem introduced in 0.3.20 or 0.3.19.

[kidandcat]

I'm working on it, anyway any PR is welcome

[pReya]

Thanks @kidandcat ! I'd love to help, but I have no experience with TypeScript. Version 0.3.18 works fine, so no worries.

[mindfulmike]

Same here, using vue-cli

[kidandcat]

Fixed in peerjs@0.3.22

[nhducseuit]

@kidandcat tried with 0.3.22 and 1.0.0 in Angular 7, this issue is still seen.

[kidandcat]

How are you importing it

[nhducseuit]

How are you importing it

Few:
import * as Peer from 'peerjs' -> this one was complied successfully, however error was thrown same like in first comment
import { Peer } from 'peerjs' and import Peer from 'peerjs' -> these two caused compile error

I only install peerjs package, don't use @type/peerjs since index.d.ts is already available in peerjs package.

[nhducseuit]

@kidandcat I was able to resolve my issue by enabling following flag in tsconfig.json file

{
...
    "esModuleInterop": true,
...
}

[phongca22]

@nhducseuit what is the context did you use?

1. import * as Peer from 'peerjs'
2. import { Peer } from 'peerjs'
3. import Peer from 'peerjs'

[lvargass]

I have this problem with ionic 4.

"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.1.0",
"buffer": "^5.2.1",
"core-js": "^2.5.4",
"peerjs": "^1.0.2",

What I can do?

[ghost]

@kidandcat I was able to resolve my issue by enabling following flag in tsconfig.json file

{
...
    "esModuleInterop": true,
...
}

Does this have any impact on anything else?
Could it break other things.
The documentation on typescript says something that is not really understandbble.
What does this esModuleInterop option actually do .Because we dont want to break other things.
https://www.typescriptlang.org/docs/handbook/compiler-options.html