Peerjs: Невозможно импортировать Peer 1.0.1 в приложение Angular 8

Созданный на 10 июл. 2019 · 9Комментарии · Источник: peers/peerjs

Здравствуйте!
Я пытался использовать peerJs с angular 8, но не смог.
Мне не удалось импортировать его в приложение.

Я создал крошечный проект (https://github.com/furozen/PeerJs-example), чтобы показать эту проблему:

1

import * as Peer from 'peerjs';

ошибка компиляции:

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

ошибка компиляции:

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

время выполнения:

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 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

время выполнения:

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

Источник

furozen

Самый полезный комментарий

Извините! это был патч в index.html, который я добавил и забыл удалить:

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

без этого патча я получил:

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)

во время выполнения.

так что вы можете проверить ошибку там: https://github.com/furozen/PeerJs-example

furozen 12 июл. 2019

👍8 ❤2 🎉1

Все 9 Комментарий

Изменение модуля на «CommonJs» помогает удалить ошибку компиляции, но не исправляет ошибку времени выполнения: все еще случай №3.

то

ReferenceError: parcelRequire is not defined

можно связать с этой проблемой: https://github.com/parcel-bundler/parcel/issues/1401

furozen 10 июл. 2019

👍1

Правильный способ - import Peer from "peerjs" , вы получаете предупреждение веб-пакета:

ПРЕДУПРЕЖДЕНИЕ в ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
Критическая зависимость: запрос зависимости - это выражение

Это не должно влиять на библиотеку или процесс компиляции.

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

kidandcat 11 июл. 2019

Правильный способ - import Peer from "peerjs" , вы получаете предупреждение веб-пакета:
ПРЕДУПРЕЖДЕНИЕ в ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
Критическая зависимость: запрос зависимости - это выражение
Это не должно влиять на библиотеку или процесс компиляции.
пакетировщик / посылочка №2883

Да, это рабочий подход, спасибо.
Заключить:
у вас должно быть "esModuleInterop": true, в tsconfig.json
и импортировать lib как: import Peer from "peerjs"

furozen 11 июл. 2019

Извините! это был патч в index.html, который я добавил и забыл удалить:

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

без этого патча я получил:

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)

во время выполнения.

так что вы можете проверить ошибку там: https://github.com/furozen/PeerJs-example

furozen 12 июл. 2019

👍8 ❤2 🎉1

Я думаю, что это не БАГ, он работает в моем проекте angular 8.
вам следует добавить в проект файл index.d.ts. вы можете найти этот файл в корневом каталоге.
НЕ нужен импорт peerjs! просто использовать класс Peer, потому что он был объявлен в файле index.d.ts.

linewei 22 нояб. 2019

Итак, я добавил peerjs (v1.1.0) в приложение Angular. Изначально у меня не было проблем или ошибок. Peerjs на самом деле не использовался, пока вы не прошли через 2-3 шага, и он просто работал. Я добавил в приложение еще одну часть, которая запускала peerjs при приземлении, и именно тогда я начал видеть ошибку parcelRequire. Я добавил инициализацию parcelRequire из https://github.com/peers/peerjs/issues/552#issuecomment -510976519, и теперь она, похоже, просто работает. Я предполагаю, что где-то есть состояние гонки, но я не потратил время, чтобы углубиться в это.

jloosli 22 нояб. 2019

Та же проблема на Angular 9. Я безуспешно добавил esModuleInterop: true и allowSyntheticDefaultImports: true в tsconfig.json. Что новенького?

adriano-di-giovanni 22 апр. 2020

это работает для меня как временное исправление в index.html согласно сообщению @furozen .

<script>
    var parcelRequire;
  </script>

vincent-seibus 2 июн. 2020

👍4

Это останется проблемой в 2021 году при импорте peerjs в проект lit-element .
Проблема, по-видимому, связана с тем, что построенный вывод peerjs начинается с:

parcelRequire=

а не, как вы знаете, объявление переменной

var parcelRequire=

В результате в моем проекте с освещенными элементами что-то просто ломается, а браузер с радостью поднимает эту переменную в глобальную область видимости и продолжает работу.