Peerjs: Unable to import Peer 1.0.1 in Angular 8 app

Created on 10 Jul 2019 · 9Comments · Source: peers/peerjs

Hello!
I tried to use peerJs with angular 8 but failed.
I did not able to import it to an app.

I've created a tiny project ( https://github.com/furozen/PeerJs-example )for show this issue:

1

import * as Peer from 'peerjs';

compile error:

ERROR in src/app/app.component.ts:14:16 - error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.

14     let peer = new Peer();
                  ~~~~~~~~~~

  src/app/app.component.ts:3:1
    3 import * as Peer from 'peerjs';
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.

2

import { Peer } from 'peerjs'

compile error:

ERROR in src/app/app.component.ts:3:10 - error TS2305: Module '"../../node_modules/peerjs"' has no exported member 'Peer'.

3 import { Peer } from 'peerjs'
         ~~~~

3

import Peer from 'peerjs'

compile error:

WARNING in ./node_modules/peerjs/dist/peerjs.min.js 1:292-296
Critical dependency: the request of a dependency is an expression

runtime:

Uncaught ReferenceError: parcelRequire is not defined
    at push../node_modules/peerjs/dist/peerjs.min.js.parcelRequire.vHo1 (peerjs.min.js:1)
    at Object../node_modules/peerjs/dist/peerjs.min.js (peerjs.min.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.component.ts (main.js:112)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.module.ts (app.component.ts:11)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)

4

import Peer = require('peerjs');

compile error:


    ERROR in src/app/app.component.ts(3,1): error TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead

runtime:

AppComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: Peer is not defined
    at new AppComponent (app.component.ts:15)
    at createClass (core.js:27863)
    at createDirectiveInstance (core.js:27685)
    at createViewNodes (core.js:38315)
    at createRootView (core.js:38187)
    at callWithDebugContext (core.js:39716)
    at Object.debugCreateRootView [as createRootView] (core.js:38953)
    at ComponentFactory_.create (core.js:26827)
    at ComponentFactoryBoundToModule.create (core.js:22791)
    at ApplicationRef.bootstrap (core.js:35343)

bug

Source

furozen

Most helpful comment

sorry! it was patch in index.html which I added and forgot to remove:

  <script>
    window.global  = window;
    var parcelRequire;
  </script>

without this patch I got :

Uncaught ReferenceError: parcelRequire is not defined
    at push../node_modules/peerjs/dist/peerjs.min.js.parcelRequire.vHo1 (peerjs.min.js:1)
    at Object../node_modules/peerjs/dist/peerjs.min.js (peerjs.min.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.component.ts (main.js:112)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.module.ts (app.component.ts:12)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)

in runtime.

so you can check the error there: https://github.com/furozen/PeerJs-example

furozen on 12 Jul 2019

👍8 ❤2 🎉1

All 9 comments

Changing module to "CommonJs" helps remove compilation error but do not fix the runtime error: still #3 case.

the

ReferenceError: parcelRequire is not defined

can be linked with this issue: https://github.com/parcel-bundler/parcel/issues/1401

furozen on 10 Jul 2019

👍1

The right way is import Peer from "peerjs", what you are getting is a webpack warning:

WARNING in ./node_modules/peerjs/dist/peerjs.min.js 1:292-296
Critical dependency: the request of a dependency is an expression

This shouldn't affect the library nor the compile process.

https://github.com/parcel-bundler/parcel/issues/2883

kidandcat on 11 Jul 2019

The right way is import Peer from "peerjs", what you are getting is a webpack warning:

WARNING in ./node_modules/peerjs/dist/peerjs.min.js 1:292-296
Critical dependency: the request of a dependency is an expression

This shouldn't affect the library nor the compile process.

parcel-bundler/parcel#2883

Yep, it is working approach thanks.
To conclude:
you should have "esModuleInterop": true, in tsconfig.json
and import lib as : import Peer from "peerjs"

furozen on 11 Jul 2019

sorry! it was patch in index.html which I added and forgot to remove:

  <script>
    window.global  = window;
    var parcelRequire;
  </script>

without this patch I got :

Uncaught ReferenceError: parcelRequire is not defined
    at push../node_modules/peerjs/dist/peerjs.min.js.parcelRequire.vHo1 (peerjs.min.js:1)
    at Object../node_modules/peerjs/dist/peerjs.min.js (peerjs.min.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.component.ts (main.js:112)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.module.ts (app.component.ts:12)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)

in runtime.

so you can check the error there: https://github.com/furozen/PeerJs-example

furozen on 12 Jul 2019

👍8 ❤2 🎉1

I think it's not a BUG, It works in my angular 8 project.
you should add index.d.ts file to project. you can find this file in root directory.
DO NOT need import peerjs ! just to use Peer class ,because it has been declared in index.d.ts file.

linewei on 22 Nov 2019

So I've added peerjs (v1.1.0) to an Angular app. Initially, I had no issues or errors. Peerjs wasn't really utilized until you navigated through 2-3 steps and it just worked. I added another part to the app, which fired up peerjs upon landing and that's when I started seeing the parcelRequire error. I added the parcelRequire initialization from https://github.com/peers/peerjs/issues/552#issuecomment-510976519 and it seems to just work now. I'm guessing there's a race condition somewhere, but I haven't spent the time to dig into it further.

jloosli on 22 Nov 2019

Same problem on Angular 9. I added both esModuleInterop: true and allowSyntheticDefaultImports: true to tsconfig.json with no success. Any news?

adriano-di-giovanni on 22 Apr 2020

this works for me as a temp fix in index.html as per @furozen post.

<script>
    var parcelRequire;
  </script>

vincent-seibus on 2 Jun 2020

👍4

This remains an issue in 2021 when importing peerjs into a lit-element project.
The problem appears to stem from the fact that the built output of peerjs begins with:

parcelRequire=

rather than, you know, declaring the variable

var parcelRequire=

As a result, things just break in my lit-element project, while the browser happily hoists this variable to the global scope and moves on with things.