peerjs: Unable to import Peer 1.0.1 in Angular 8 app

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)

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 15 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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

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

<script>
    var parcelRequire;
  </script>

In case anyone is still having trouble - here’s how we’ve implemented a solution.

// shim.js
window.parcelRequire = undefined;
import './shim';
import Peer from 'peerjs';

Make sure you import the shim file before peerjs

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.

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