μλ
νμΈμ!
κ°λ 8κ³Ό ν¨κ» peerJλ₯Ό μ¬μ©νλ €κ³ μλνμ§λ§ μ€ν¨νμ΅λλ€.
μ±μΌλ‘ κ°μ Έμ¬ μ μμ΅λλ€.
μ΄ λ¬Έμ λ₯Ό 보μ¬μ£ΌκΈ° μν΄ μμ νλ‘μ νΈ (https://github.com/furozen/PeerJs-example)λ₯Ό λ§λ€μμ΅λλ€.
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.
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'
~~~~
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)
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)
λͺ¨λμ "CommonJs"λ‘ λ³κ²½νλ©΄ μ»΄νμΌ μ€λ₯λ₯Ό μ κ±°νλ λ° λμμ΄λμ§λ§ λ°νμ μ€λ₯λ₯Ό μμ νμ§λ μμ΅λλ€. μ¬μ ν # 3 μ¬λ‘μ λλ€.
κ·Έλ§νΌ
ReferenceError: parcelRequire is not defined
μ΄ λ¬Έμ μ μ°κ²°λ μ μμ΅λλ€ : https://github.com/parcel-bundler/parcel/issues/1401
μ¬λ°λ₯Έ λ°©λ²μ import Peer from "peerjs"
μ΄λ©° μΉν© κ²½κ³ κ° νμλ©λλ€.
./node_modules/peerjs/dist/peerjs.min.js 1 : 292-296μ κ²½κ³
μ€μ μ’ μμ± : μ’ μμ± μμ²μ ννμμ λλ€.
μ΄κ²μ λΌμ΄λΈλ¬λ¦¬ λ μ»΄νμΌ νλ‘μΈμ€μ μν₯μμ£Όμ§ μμμΌν©λλ€.
μ¬λ°λ₯Έ λ°©λ²μ
import Peer from "peerjs"
μ΄λ©° μΉν© κ²½κ³ κ° νμλ©λλ€../node_modules/peerjs/dist/peerjs.min.js 1 : 292-296μ κ²½κ³
μ€μ μ’ μμ± : μ’ μμ± μμ²μ ννμμ λλ€.μ΄κ²μ λΌμ΄λΈλ¬λ¦¬ λ μ»΄νμΌ νλ‘μΈμ€μ μν₯μμ£Όμ§ μμμΌν©λλ€.
λ€, μμ
μ κ·Ό λ°©μ κ°μ¬ν©λλ€.
κ²°λ‘ μ μΌλ‘:
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://github.com/furozen/PeerJs-example μμ μ€λ₯λ₯Ό νμΈν μ μμ΅λλ€.
λλ κ·Έκ²μ΄ λ²κ·Έκ° μλλΌκ³ μκ°ν©λλ€. κ·Έκ²μ λ΄ κ°λ 8 νλ‘μ νΈμμ μλν©λλ€.
index.d.ts νμΌμ νλ‘μ νΈμ μΆκ°ν΄μΌν©λλ€. μ΄ νμΌμ λ£¨νΈ λλ ν 리μμ μ°Ύμ μ μμ΅λλ€.
import 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: true
λ° allowSyntheticDefaultImports: true
λ₯Ό tsconfig.jsonμ μΆκ°νμ§λ§ μ±κ³΅νμ§ λͺ»νμ΅λλ€. μ΄λ€ μμμ΄λΌλ?
μ΄κ²μ @furozen κ²μλ¬Όμ λ°λΌ index.htmlμ μμ μμ μΌλ‘ λλ₯Ό μν΄ μλν©λλ€.
<script>
var parcelRequire;
</script>
μ΄λ μ‘°λͺ
μμ νλ‘μ νΈλ‘ peerjsλ₯Ό κ°μ Έμ¬ λ 2021 λ
μ λ¬Έμ λ‘ λ¨μ μμ΅λλ€.
λ¬Έμ λ peerjsμ λΉλ λ μΆλ ₯μ΄ λ€μμΌλ‘ μμνλ€λ μ¬μ€μμ λΉλ‘―λ κ²μΌλ‘ 보μ
λλ€.
parcelRequire=
μμλ€μνΌ λ³μλ₯Ό μ μΈνλ κ²λ³΄λ€
var parcelRequire=
κ²°κ³Όμ μΌλ‘ λ΄ μ‘°λͺ μμ νλ‘μ νΈμμ λ¬Έμ κ° λ°μνλ λ°λ©΄ λΈλΌμ°μ λμ΄ λ³μλ₯Ό μ μ λ²μλ‘ κΈ°κΊΌμ΄ λμ΄ μ¬λ € μμ μ μ§νν©λλ€.
κ°μ₯ μ μ©ν λκΈ
μ£μ‘ν©λλ€! λ΄κ° μΆκ°νκ³ μ κ±°νλ κ²μ μμ index.htmlμ ν¨μΉμμ΅λλ€.
μ΄ ν¨μΉμμ΄ λλ μ»μλ€ :
λ°νμμ.
https://github.com/furozen/PeerJs-example μμ μ€λ₯λ₯Ό νμΈν μ μμ΅λλ€.