Peerjs: Impossible d'importer Peer 1.0.1 dans l'application Angular 8

Créé le 10 juil. 2019 · 9Commentaires · Source: peers/peerjs

salut!
J'ai essayé d'utiliser peerJs avec angular 8 mais j'ai échoué.
Je n'ai pas pu l'importer dans une application.

J'ai créé un petit projet (https://github.com/furozen/PeerJs-example) pour montrer ce problème:

1

import * as Peer from 'peerjs';

erreur de compilation:

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'

erreur de compilation:

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'

erreur de compilation:

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

Durée:

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');

erreur de compilation:


    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

Durée:

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

Commentaire le plus utile

Pardon! c'était un patch dans index.html que j'ai ajouté et oublié de supprimer:

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

sans ce patch, j'ai:

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)

en exécution.

afin que vous puissiez vérifier l'erreur ici: https://github.com/furozen/PeerJs-example

furozen le 12 juil. 2019

👍8 ❤2 🎉1

Tous les 9 commentaires

Changer le module en "CommonJs" aide à supprimer l'erreur de compilation mais ne corrige pas l'erreur d'exécution: toujours le cas n ° 3.

ReferenceError: parcelRequire is not defined

peut être lié à ce numéro: https://github.com/parcel-bundler/parcel/issues/1401

furozen le 10 juil. 2019

👍1

La bonne façon est de import Peer from "peerjs" , ce que vous obtenez est un avertissement Webpack:

AVERTISSEMENT dans ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
Dépendance critique: la demande d'une dépendance est une expression

Cela ne devrait pas affecter la bibliothèque ni le processus de compilation.

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

kidandcat le 11 juil. 2019

La bonne façon est de import Peer from "peerjs" , ce que vous obtenez est un avertissement Webpack:
AVERTISSEMENT dans ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
Dépendance critique: la demande d'une dépendance est une expression
Cela ne devrait pas affecter la bibliothèque ni le processus de compilation.
colis-groupeur / colis # 2883

Oui, c'est une approche de travail merci.
De conclure:
vous devriez avoir "esModuleInterop": true, dans tsconfig.json
et importez la lib comme: importez Peer depuis "peerjs"

furozen le 11 juil. 2019

Pardon! c'était un patch dans index.html que j'ai ajouté et oublié de supprimer:

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

sans ce patch, j'ai:

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)

en exécution.

afin que vous puissiez vérifier l'erreur ici: https://github.com/furozen/PeerJs-example

furozen le 12 juil. 2019

👍8 ❤2 🎉1

Je pense que ce n'est pas un BUG, cela fonctionne dans mon projet angular 8.
vous devez ajouter le fichier index.d.ts au projet. vous pouvez trouver ce fichier dans le répertoire racine.
NE PAS besoin d'importer peerjs! juste pour utiliser la classe Peer, car elle a été déclarée dans le fichier index.d.ts.

linewei le 22 nov. 2019

J'ai donc ajouté peerjs (v1.1.0) à une application Angular. Au départ, je n'ai eu aucun problème ni erreur. Peerjs n'était pas vraiment utilisé jusqu'à ce que vous ayez parcouru 2-3 étapes et cela a juste fonctionné. J'ai ajouté une autre partie à l'application, qui a déclenché peerjs lors de l'atterrissage et c'est là que j'ai commencé à voir l'erreur parcelRequire. J'ai ajouté l'initialisation parcelRequire à partir de https://github.com/peers/peerjs/issues/552#issuecomment -510976519 et cela semble fonctionner maintenant. Je suppose qu'il y a une condition de course quelque part, mais je n'ai pas passé le temps à creuser davantage.

jloosli le 22 nov. 2019

Même problème sur Angular 9. J'ai ajouté à la fois esModuleInterop: true et allowSyntheticDefaultImports: true à tsconfig.json sans succès. Des nouvelles?

adriano-di-giovanni le 22 avr. 2020

cela fonctionne pour moi comme un correctif temporaire dans index.html selon @furozen post.

<script>
    var parcelRequire;
  </script>

vincent-seibus le 2 juin 2020

👍4

Cela reste un problème en 2021 lors de l'importation de peerjs dans un projet lit-element .
Le problème semble provenir du fait que la sortie construite de peerjs commence par:

parcelRequire=

plutôt que, vous savez, déclarer la variable

var parcelRequire=

En conséquence, les choses se cassent simplement dans mon projet lit-element, tandis que le navigateur hisse joyeusement cette variable à la portée globale et avance avec les choses.