Peerjs: Não é possível importar Peer 1.0.1 no aplicativo Angular 8

Criado em 10 jul. 2019 · 9Comentários · Fonte: peers/peerjs

Olá!
Tentei usar peerJs com angular 8, mas falhou.
Não consegui importá-lo para um aplicativo.

Criei um pequeno projeto (https://github.com/furozen/PeerJs-example) para mostrar este problema:

1

import * as Peer from 'peerjs';

erro de compilação:

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'

erro de compilação:

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'

erro de compilação:

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

tempo de execução:

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

erro de compilação:


    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

tempo de execução:

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

Fonte

furozen

Comentários muito úteis

Desculpe! era um patch em index.html que adicionei e esqueci de remover:

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

sem este patch eu tenho:

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)

em tempo de execução.

então você pode verificar o erro lá: https://github.com/furozen/PeerJs-example

furozen em 12 jul. 2019

👍8 ❤2 🎉1

Todos 9 comentários

Alterar o módulo para "CommonJs" ajuda a remover o erro de compilação, mas não corrige o erro de tempo de execução: ainda # 3 caso.

ReferenceError: parcelRequire is not defined

pode ser vinculado a este problema: https://github.com/parcel-bundler/parcel/issues/1401

furozen em 10 jul. 2019

👍1

O caminho certo é import Peer from "peerjs" , o que você está recebendo é um aviso de pacote da web:

AVISO em ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
Dependência crítica: o pedido de uma dependência é uma expressão

Isso não deve afetar a biblioteca nem o processo de compilação.

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

kidandcat em 11 jul. 2019

O caminho certo é import Peer from "peerjs" , o que você está recebendo é um aviso de pacote da web:
AVISO em ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
Dependência crítica: o pedido de uma dependência é uma expressão
Isso não deve afetar a biblioteca nem o processo de compilação.
parcel-bundler / parcel # 2883

Sim, é uma abordagem de trabalho, obrigado.
Concluir:
você deve ter "esModuleInterop": true, em tsconfig.json
e importe lib como: import Peer de "peerjs"

furozen em 11 jul. 2019

Desculpe! era um patch em index.html que adicionei e esqueci de remover:

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

sem este patch eu tenho:

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)

em tempo de execução.

então você pode verificar o erro lá: https://github.com/furozen/PeerJs-example

furozen em 12 jul. 2019

👍8 ❤2 🎉1

Acho que não é um BUG, funciona no meu projeto angular 8.
você deve adicionar o arquivo index.d.ts ao projeto. você pode encontrar este arquivo no diretório raiz.
NÃO precisa importar peerjs! apenas para usar a classe Peer, porque ela foi declarada no arquivo index.d.ts.

linewei em 22 nov. 2019

Então, adicionei peerjs (v1.1.0) a um aplicativo Angular. Inicialmente, não tive problemas ou erros. Peerjs não era realmente utilizado até que você navegasse por 2-3 etapas e funcionasse. Eu adicionei outra parte ao aplicativo, que disparou peerjs ao pousar e foi quando comecei a ver o erro parcelRequire. Eu adicionei a inicialização parcelRequire de https://github.com/peers/peerjs/issues/552#issuecomment -510976519 e parece funcionar agora. Suponho que haja uma condição de corrida em algum lugar, mas não gastei tempo para aprofundar mais nela.

jloosli em 22 nov. 2019

O mesmo problema no Angular 9. Eu adicionei esModuleInterop: true e allowSyntheticDefaultImports: true ao tsconfig.json sem sucesso. Alguma novidade?

adriano-di-giovanni em 22 abr. 2020

isso funciona para mim como uma correção temporária em index.html de acordo com a postagem

<script>
    var parcelRequire;
  </script>

vincent-seibus em 2 jun. 2020

👍4

Isso continua sendo um problema em 2021 ao importar peerjs para um projeto lit-element .
O problema parece resultar do fato de que a saída construída de peerjs começa com:

parcelRequire=

em vez de, você sabe, declarar a variável

var parcelRequire=

Como resultado, as coisas simplesmente quebram em meu projeto de elemento lit, enquanto o navegador felizmente eleva essa variável para o escopo global e segue em frente.