Peerjs: تعذر استيراد Peer 1.0.1 في تطبيق Angular 8

تم إنشاؤها على ١٠ يوليو ٢٠١٩  ·  9تعليقات  ·  مصدر: peers/peerjs

مرحبا!
حاولت استخدام peerJs مع الزاوية 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
مصدر
picture 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

picture furozen في ١٢ يوليو ٢٠١٩
👍8 ❤2 🎉1

ال 9 كومينتر

يساعد تغيير الوحدة النمطية إلى "CommonJs" في إزالة خطأ الترجمة ولكن لا يتم إصلاح خطأ وقت التشغيل: لا تزال الحالة رقم 3.

ال

ReferenceError: parcelRequire is not defined

يمكن ربطها بهذه المشكلة: https://github.com/parcel-bundler/parcel/issues/1401

furozen picture furozen في ١٠ يوليو ٢٠١٩
👍1

الطريقة الصحيحة هي import Peer from "peerjs" ، ما تحصل عليه هو تحذير webpack:

تحذير في ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
التبعية الحرجة: طلب التبعية هو تعبير

لا ينبغي أن يؤثر هذا على المكتبة ولا على عملية الترجمة.

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

kidandcat picture kidandcat في ١١ يوليو ٢٠١٩

الطريقة الصحيحة هي import Peer from "peerjs" ، ما تحصل عليه هو تحذير webpack:

تحذير في ./node_modules/peerjs/dist/peerjs.min.js 1: 292-296
التبعية الحرجة: طلب التبعية هو تعبير

لا ينبغي أن يؤثر هذا على المكتبة ولا على عملية الترجمة.

لازم-تجميع / طرد # 2883

نعم ، إنه نهج العمل شكرا.
ليستنتج:
يجب أن يكون لديك "esModuleInterop": صحيح ، في tsconfig.json
واستيراد lib كـ: استيراد نظير من "peerjs"

furozen picture 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 picture furozen في ١٢ يوليو ٢٠١٩
👍8 ❤2 🎉1

أعتقد أنه ليس خطأً ، إنه يعمل في مشروعي الزاوي 8.
يجب عليك إضافة ملف index.d.ts إلى المشروع. يمكنك العثور على هذا الملف في الدليل الجذر.
لا تحتاج استيراد peerjs! فقط لاستخدام فئة Peer ، لأنه تم التصريح عنها في ملف index.d.ts.

linewei picture linewei في ٢٢ نوفمبر ٢٠١٩

لذلك أضفت peerjs (v1.1.0) إلى تطبيق Angular. في البداية ، لم يكن لدي أي مشاكل أو أخطاء. لم يتم استخدام Peerjs حقًا حتى انتقلت من خلال 2-3 خطوات وعملت للتو. لقد أضفت جزءًا آخر إلى التطبيق ، مما أدى إلى إثارة الزملاء عند الهبوط وذلك عندما بدأت في رؤية خطأ parcelRequire. أضفت تهيئة parcelRequire من https://github.com/peers/peerjs/issues/552#issuecomment -510976519 ويبدو أنها تعمل الآن فقط. أظن أن هناك حالة سباق في مكان ما ، لكنني لم أقضي الوقت في البحث فيها أكثر.

jloosli picture jloosli في ٢٢ نوفمبر ٢٠١٩

نفس المشكلة على Angular 9. لقد أضفت كلاً من esModuleInterop: true و allowSyntheticDefaultImports: true إلى tsconfig.json دون نجاح. أى اخبار؟

adriano-di-giovanni picture adriano-di-giovanni في ٢٢ أبريل ٢٠٢٠

هذا يعمل بالنسبة لي كتصحيح مؤقت في index.html حسب 

<script>
    var parcelRequire;
  </script>
vincent-seibus picture vincent-seibus في ٢ يونيو ٢٠٢٠
👍4

تظل هذه مشكلة في عام 2021 عند استيراد النظراء إلى مشروع العنصر المضاء .
يبدو أن المشكلة تنبع من حقيقة أن الناتج الداخلي للنظراء يبدأ بـ:

parcelRequire=

بدلا من التصريح عن المتغير كما تعلم

var parcelRequire=

نتيجة لذلك ، تنفجر الأشياء في مشروع العنصر المضاء الخاص بي ، بينما يرفع المتصفح بسعادة هذا المتغير إلى النطاق العام ويتحرك مع الأشياء.

jmonster picture jmonster في ٣١ يناير ٢٠٢١
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

kahrkunne picture kahrkunne  ·  4تعليقات
fresheneesz picture fresheneesz  ·  10تعليقات
senihtosun picture senihtosun  ·  5تعليقات
nick0702y picture nick0702y  ·  9تعليقات
jameshfisher picture jameshfisher  ·  5تعليقات