Peerjs: 无法在Angular 8应用中导入Peer 1.0.1

创建于 2019-07-10  ·  9评论  ·  资料来源: peers/peerjs

你好!
我尝试使用角度为8的peerJs,但失败了。
我无法将其导入到应用程序。

我创建了一个小项目(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)

最有用的评论

抱歉! 它是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

所有9条评论

将模块更改为“ CommonJs”有助于消除编译错误,但不能解决运行时错误:仍然是#3情况。

ReferenceError: parcelRequire is not defined

可以与此问题相关联: https :

正确的方法是import Peer from "peerjs" ,您得到的是一个webpack警告:

在./node_modules/peerjs/dist/peerjs.min.js中的警告1:292-296
关键依赖项:依赖项的请求是一个表达式

这不应该影响库或编译过程。

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

正确的方法是import Peer from "peerjs" ,您得到的是一个webpack警告:

在./node_modules/peerjs/dist/peerjs.min.js中的警告1:292-296
关键依赖项:依赖项的请求是一个表达式

这不应该影响库或编译过程。

包裹捆扎机/包裹#2883

是的,这是工作方法,谢谢。
结论:
您应该在tsconfig.json中具有“ esModuleInterop”:true
并将lib导入为:从“ peerjs”导入Peer

抱歉! 它是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

我认为这不是错误,它可以在我的angular 8项目中使用。
您应该将index.d.ts文件添加到项目中。 您可以在根目录中找到此文件。
不需要导入peerjs! 仅用于Peer类,因为它已在index.d.ts文件中声明。

所以我已经将peerjs(v1.1.0)添加到了Angular应用中。 最初,我没有任何问题或错误。 直到您浏览了2-3个步骤,Peerjs才真正被利用,它才起作用。 我在应用程序中添加了另一部分,它在着陆时启动了peerjs,这就是我开始看到parcelRequire错误的时候。 我从https://github.com/peers/peerjs/issues/552#issuecomment -510976519添加了parcelRequire初始化,它似乎现在可以工作了。 我猜想某处存在比赛条件,但我没有花时间进一步研究它。

在Angular 9上也有同样的问题。我将esModuleInterop: trueallowSyntheticDefaultImports: true到tsconfig.json中,但没有成功。 任何新闻?

根据@furozen帖子,这对我来说是index.html中的临时修复程序。

<script>
    var parcelRequire;
  </script>

进口peerjs成时,这仍然是在2021年的一个问题点燃元素的项目。
该问题似乎源于以下事实:peerjs的构建输出始于:

parcelRequire=

而不是声明变量

var parcelRequire=

结果,事情就在我的精简项目中中断了,而浏览器高兴地将此变量提升到了全局范围并继续前进。

此页面是否有帮助?
0 / 5 - 0 等级