Peerjs: Peer 1.0.1 kann in der Angular 8-App nicht importiert werden

Erstellt am 10. Juli 2019  ·  9Kommentare  ·  Quelle: peers/peerjs

Hallo!
Ich habe versucht, PeerJs mit Winkel 8 zu verwenden, bin aber gescheitert.
Ich konnte es nicht in eine App importieren.

Ich habe ein kleines Projekt (https://github.com/furozen/PeerJs-example) erstellt, um dieses Problem zu zeigen:

1

import * as Peer from 'peerjs';

Kompilierungsfehler:

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'

Kompilierungsfehler:

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'

Kompilierungsfehler:

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

Laufzeit:

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

Kompilierungsfehler:


    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

Laufzeit:

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
Quelle
picture furozen

Hilfreichster Kommentar

Es tut uns leid! Es war ein Patch in index.html, den ich hinzugefügt und vergessen habe zu entfernen:

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

ohne diesen Patch habe ich:

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)

zur Laufzeit.

So können Sie den Fehler dort überprüfen: https://github.com/furozen/PeerJs-example

picture furozen am 12. Juli 2019
👍8 ❤2 🎉1

Alle 9 Kommentare

Das Ändern des Moduls in "CommonJs" hilft, Kompilierungsfehler zu beseitigen, behebt jedoch nicht den Laufzeitfehler: immer noch # 3 Fall.

das

ReferenceError: parcelRequire is not defined

kann mit diesem Problem verknüpft werden: https://github.com/parcel-bundler/parcel/issues/1401

furozen picture furozen am 10. Juli 2019
👍1

Der richtige Weg ist import Peer from "peerjs" . Sie erhalten eine Webpack-Warnung:

WARNUNG in ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
Kritische Abhängigkeit: Die Anforderung einer Abhängigkeit ist ein Ausdruck

Dies sollte weder die Bibliothek noch den Kompilierungsprozess beeinflussen.

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

kidandcat picture kidandcat am 11. Juli 2019

Der richtige Weg ist import Peer from "peerjs" . Sie erhalten eine Webpack-Warnung:

WARNUNG in ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
Kritische Abhängigkeit: Die Anforderung einer Abhängigkeit ist ein Ausdruck

Dies sollte weder die Bibliothek noch den Kompilierungsprozess beeinflussen.

Paketbündler / Paket # 2883

Ja, es funktioniert Ansatz danke.
Schlussfolgern:
Sie sollten "esModuleInterop": true in tsconfig.json haben
und importiere lib als: importiere Peer von "peerjs"

furozen picture furozen am 11. Juli 2019

Es tut uns leid! Es war ein Patch in index.html, den ich hinzugefügt und vergessen habe zu entfernen:

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

ohne diesen Patch habe ich:

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)

zur Laufzeit.

So können Sie den Fehler dort überprüfen: https://github.com/furozen/PeerJs-example

furozen picture furozen am 12. Juli 2019
👍8 ❤2 🎉1

Ich denke, es ist kein Fehler, es funktioniert in meinem Winkel-8-Projekt.
Sie sollten dem Projekt die Datei index.d.ts hinzufügen. Sie finden diese Datei im Stammverzeichnis.
KEINE Peerjs importieren! Nur um die Peer-Klasse zu verwenden, da sie in der Datei index.d.ts deklariert wurde.

linewei picture linewei am 22. Nov. 2019

Also habe ich einer Angular-App Peerjs (v1.1.0) hinzugefügt. Anfangs hatte ich keine Probleme oder Fehler. Peerjs wurde nicht wirklich verwendet, bis Sie durch 2-3 Schritte navigiert haben und es einfach funktioniert hat. Ich habe der App einen weiteren Teil hinzugefügt, der bei der Landung Peerjs ausgelöst hat, und dann wurde der Fehler parcelRequire angezeigt. Ich habe die parcelRequire-Initialisierung von https://github.com/peers/peerjs/issues/552#issuecomment -510976519 hinzugefügt und sie scheint gerade jetzt zu funktionieren. Ich vermute, dass es irgendwo eine Rennbedingung gibt, aber ich habe nicht die Zeit darauf verwendet, mich weiter damit zu beschäftigen.

jloosli picture jloosli am 22. Nov. 2019

Das gleiche Problem bei Angular 9. Ich habe tsconfig.json ohne Erfolg sowohl esModuleInterop: true als auch allowSyntheticDefaultImports: true hinzugefügt. Keine Neuigkeiten?

adriano-di-giovanni picture adriano-di-giovanni am 22. Apr. 2020

Dies funktioniert für mich als temporärer Fix in index.html gemäß @furozen post.

<script>
    var parcelRequire;
  </script>
vincent-seibus picture vincent-seibus am 2. Juni 2020
👍4

Dies bleibt ein Problem im Jahr 2021 beim Importieren von Peerjs in ein Lit-Element- Projekt.
Das Problem scheint auf die Tatsache zurückzuführen zu sein, dass die erstellte Ausgabe von PeerJs mit Folgendem beginnt:

parcelRequire=

anstatt die Variable zu deklarieren

var parcelRequire=

Infolgedessen brechen die Dinge in meinem Lit-Element-Projekt einfach zusammen, während der Browser diese Variable glücklich in den globalen Bereich hebt und mit den Dingen fortfährt.

jmonster picture jmonster am 31. Jan. 2021
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

maxpavlov picture maxpavlov  ·  6Kommentare
schweini picture schweini  ·  7Kommentare
jameshfisher picture jameshfisher  ·  6Kommentare
l2aelba picture l2aelba  ·  3Kommentare
fresheneesz picture fresheneesz  ·  10Kommentare