Peerjs: No se puede importar Peer 1.0.1 en la aplicación Angular 8

Creado en 10 jul. 2019  ·  9Comentarios  ·  Fuente: peers/peerjs

¡Hola!
Intenté usar peerJs con angular 8 pero fallé.
No pude importarlo a una aplicación.

Creé un pequeño proyecto (https://github.com/furozen/PeerJs-example) para mostrar este problema:

1

import * as Peer from 'peerjs';

Error de compilación:

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'

Error de compilación:

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'

Error de compilación:

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

tiempo de ejecución:

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

Error de compilación:


    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

tiempo de ejecución:

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

Comentario más útil

¡lo siento! era un parche en index.html que agregué y olvidé eliminar:

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

sin este parche tengo:

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 tiempo de ejecución.

para que pueda verificar el error allí: https://github.com/furozen/PeerJs-example

picture furozen en 12 jul. 2019
👍8 ❤2 🎉1

Todos 9 comentarios

Cambiar el módulo a "CommonJs" ayuda a eliminar el error de compilación pero no corrige el error de tiempo de ejecución: sigue siendo el caso # 3.

la

ReferenceError: parcelRequire is not defined

se puede vincular con este problema: https://github.com/parcel-bundler/parcel/issues/1401

furozen picture furozen en 10 jul. 2019
👍1

La forma correcta es import Peer from "peerjs" , lo que está recibiendo es una advertencia de paquete web:

ADVERTENCIA en ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
Dependencia crítica: la solicitud de una dependencia es una expresión

Esto no debería afectar a la biblioteca ni al proceso de compilación.

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

kidandcat picture kidandcat en 11 jul. 2019

La forma correcta es import Peer from "peerjs" , lo que está recibiendo es una advertencia de paquete web:

ADVERTENCIA en ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
Dependencia crítica: la solicitud de una dependencia es una expresión

Esto no debería afectar a la biblioteca ni al proceso de compilación.

paquete-empaquetadora / paquete # 2883

Sí, es un enfoque de trabajo gracias.
Para concluir:
debería tener "esModuleInterop": verdadero, en tsconfig.json
e importar lib como: importar Peer desde "peerjs"

furozen picture furozen en 11 jul. 2019

¡lo siento! era un parche en index.html que agregué y olvidé eliminar:

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

sin este parche tengo:

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 tiempo de ejecución.

para que pueda verificar el error allí: https://github.com/furozen/PeerJs-example

furozen picture furozen en 12 jul. 2019
👍8 ❤2 🎉1

Creo que no es un ERROR, funciona en mi proyecto angular 8.
debe agregar el archivo index.d.ts al proyecto. puede encontrar este archivo en el directorio raíz.
¡NO necesita importar peerjs! solo para usar la clase Peer, porque se ha declarado en el archivo index.d.ts.

linewei picture linewei en 22 nov. 2019

Así que agregué peerjs (v1.1.0) a una aplicación Angular. Inicialmente, no tuve problemas ni errores. Peerjs no se utilizó realmente hasta que navegó a través de 2-3 pasos y simplemente funcionó. Agregué otra parte a la aplicación, que activó peerjs al aterrizar y fue entonces cuando comencé a ver el error parcelRequire. Agregué la inicialización de parcelRequire de https://github.com/peers/peerjs/issues/552#issuecomment -510976519 y parece que simplemente funciona ahora. Supongo que hay una condición de carrera en alguna parte, pero no he perdido el tiempo para profundizar más.

jloosli picture jloosli en 22 nov. 2019

El mismo problema en Angular 9. Agregué esModuleInterop: true y allowSyntheticDefaultImports: true a tsconfig.json sin éxito. ¿Hay noticias?

adriano-di-giovanni picture adriano-di-giovanni en 22 abr. 2020

esto funciona para mí como una solución temporal en index.html según la publicación de @furozen .

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

Esto sigue siendo un problema en 2021 al importar peerjs en un proyecto de elemento iluminado .
El problema parece provenir del hecho de que la salida construida de peerjs comienza con:

parcelRequire=

en lugar de, ya sabes, declarar la variable

var parcelRequire=

Como resultado, las cosas simplemente se rompen en mi proyecto de elemento iluminado, mientras que el navegador felizmente eleva esta variable al alcance global y sigue adelante.

jmonster picture jmonster en 31 ene. 2021
¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

nick0702y picture nick0702y  ·  9Comentarios
senihtosun picture senihtosun  ·  5Comentarios
veezo2007pk picture veezo2007pk  ·  7Comentarios
maxpavlov picture maxpavlov  ·  6Comentarios
geraldsamosir picture geraldsamosir  ·  6Comentarios