Peerjs: Angular8アプリでPeer1.0.1をインポートできません

作成日 2019年07月10日  ·  9コメント  ·  ソース: peers/peerjs

こんにちは!
角度8でpeerJを使用しようとしましたが、失敗しました。
アプリにインポートできませんでした。

この問題を表示するための小さなプロジェクト(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

最も参考になるコメント

ごめんなさい! 追加して削除するのを忘れた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

バグではないと思います。Angular8プロジェクトで機能します。
index.d.tsファイルをプロジェクトに追加する必要があります。 このファイルはルートディレクトリにあります。
インポートpeerjsは必要ありません! index.d.tsファイルで宣言されているため、Peerクラスを使用するだけです。

そこで、Angularアプリにpeerjs(v1.1.0)を追加しました。 最初は、問題やエラーはありませんでした。 Peerjsは、2〜3の手順を実行して機能するまで、実際には使用されませんでした。 アプリに別のパーツを追加しました。これにより、着陸時に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をlit-elementプロジェクトにインポートするときの2021年の問題のままです。
この問題は、peerjsのビルド出力が次のように始まるという事実に起因しているようです。

parcelRequire=

変数を宣言するのではなく

var parcelRequire=

その結果、私のlit-elementプロジェクトでは物事がうまくいかず、ブラウザーはこの変数をグローバルスコープに持ち上げて、物事を進めます。

このページは役に立ちましたか?
0 / 5 - 0 評価