peerjs__WEBPACK_IMPORTED_MODULE_ is not a constructor

[nick-delirium]

Somewhat old error, but this appeared inside a package used in react app; its built with Peerjs v 1.4.7

we import the library with import Peer from 'peerjs'

and then create an instance const peerEx = new Peer(id, options)

After that, we build our package (cjs/mjs) with tsc: tsconfig

{
  "compilerOptions": {
    "noImplicitThis": true,
    "strictNullChecks": true,
    "alwaysStrict": true,
    "target": "es2017",
    "module": "es6",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "outDir": "./lib"
  }
}

tsconfig.cjs

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./cjs"
  },
}

Then we import resulting library inside a frontend app and call it. At this step, we get the resulting error: TypeError: peerjs__WEBPACK_IMPORTED_MODULE_ is not a constructor

Things and steps I tried to resolve the issue:

importing and then trying to use .default:

import Peer from 'peerjs'
Peer = Peer.default || Peer

(1)

adding context replacement to webpack conf:

new webpack.ContextReplacementPlugin(/peerjs/, (context) => {
        context.dependencies[0].critical = false;

        return context;
      }),

(2)

Neither of this two works BUT when we downgrade peer version to 1.3.2 and use hack 1, everything works.

Would be happy to give more context if needed

[jonasgloning]

Hey @sylenien, Does the following work? (without any hacks)

import {Peer} from 'peerjs'

[nick-delirium]

Results in this error/warn and error

Interestingly enough, with .default || Peer everything seems to be working even with latest version for the majority of installations except one exact one project setup that breaks once we change peerjs version or remove this hack. https://github.com/openreplay/openreplay/blob/dev/tracker/tracker-assist/src/Assist.ts#L19

small update: also getting this

[jonasgloning]

Is your code public? I'd like to reproduce that error 🤔 (With basic build instructions would be great)

In your warning, the file peerjs.min.js is mentioned, but that is the browser bundle and should not be used when combined with a bundler like webpack.

[nick-delirium]

Unfortunately code is not public (since its our customers code). They agreed to share their webpack config by monday

Here's what we have now:

Peerjs used as dep in our library and being built into cjs/lib with ts only, ts version "typescript": "^4.6.0-dev.20211126" + node 17.9.0

Then its being included in react app with

node v.14 webpack 5

you can try to reproduce same error with import {Peer} from 'peerjs' by getting this testing example, building assist plugin from source (from dev branch, can set tracker peer and dev dependency as latest (4.1.9) or build it as well) but you will need an endpoint in order to make tracker work and actually start - we can create temp test key or you can make your own on our saas platform for free.

Otherwise I'm happy to try any workaround or idea you have on my machine