Peerjs: Unable to import Peer in Angular application

Created on 7 Feb 2019 · 13Comments · Source: peers/peerjs

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

Source

Pacific112

😕3

Most helpful comment

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

kidandcat on 13 Feb 2019

👍2 ❤1

All 13 comments

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

tetriminoss on 8 Feb 2019

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

pReya on 13 Feb 2019

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

kidandcat on 13 Feb 2019

👍2 ❤1

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

pReya on 13 Feb 2019

Same here, using vue-cli

mindfulmike on 14 Feb 2019

Fixed in [email protected]

kidandcat on 15 Feb 2019

❤1

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

nhducseuit on 24 May 2019

How are you importing it

kidandcat on 24 May 2019

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 on 25 May 2019

@kidandcat I was able to resolve my issue by enabling following flag in tsconfig.json file
```
{
...
"esModuleInterop": true,
...
}

nhducseuit on 28 May 2019

👍2

@nhducseuit what is the context did you use?

import * as Peer from 'peerjs'
import { Peer } from 'peerjs'
import Peer from 'peerjs'

phongca22 on 20 Jun 2019

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?

lvargass on 23 Jul 2019

@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