Bug: ES module error

[theazgra]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-player, playback-core

Which browsers are you using?

Edge ("Edgeium")

Which operating systems are you using?

Windows

Description

We are unable to use newer version of mux-player, newer than 1.11.4.

All next releases 1.12.0 and 1.12.1, can't be used in our Nuxt (Vue2) project.

Console error is appended.

We were originally trying to upgrade the version, because we were seeing a lot of Uncaught ReferenceError: e is not defined errors in sentry, which we think also originates from the mux-player (1.11.4)

Reduced test case

No response

Steps to reproduce

1. Install mux-player, newer than 1.11.4
2. Try to run nuxt project

Current Behavior

Error in the description.

Expected Behavior

Project runs, player works.

Errors

ERROR require() of ES Module C:\codes\git\pickey\app\node_modules@mux\playback-core\dist\index.cjs.js from C:\codes\git\pickey\app\node_modules@mux\mux-video\dist\index.cjs.js not supported.
C:\codes\git\pickey\app\node_modules@mux\playback-core\dist\index.cjs.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename C:\codes\git\pickey\app\node_modules@mux\playback-core\dist\index.cjs.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\codes\git\pickey\app\node_modules@mux\playback-core\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

node_modules@mux\playback-core\dist\index.cjs.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename node_modules@mux\playback-core\dist\index.cjs.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\codes\git\pickey\app\node_modules@mux\playback-core\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

at Object. (node_modules@mux\mux-video\dist\index.cjs.js:1:1862)
at Object. (node_modules@mux\mux-player\dist\index.cjs.js:915:1084)
at node_modules\vue-server-renderer\build.prod.js:1:77882
at Object. (webpack:/external "@mux/mux-player":1:0)
at webpack_require (webpack/bootstrap:25:0)
at Module.619 (pages/_handle/index.js:1409:19)
at webpack_require (webpack/bootstrap:25:0)
at Module.673 (components/posts/PostVideo.vue:28:0)
at webpack_require (webpack/bootstrap:25:0)
at Module.639 (components/posts/PostItem.vue:28:0)
at webpack_require (webpack/bootstrap:25:0)
at Module.783 (components/creator/CreatorPinnedPost.vue:28:0)
at webpack_require (webpack/bootstrap:25:0)
at Module.876 (components/PersonalPageLogged.vue:28:0)
at webpack_require (webpack/bootstrap:25:0)
at Module.1151 (pages/_handle/index.vue:22:0)
at webpack_require (webpack/bootstrap:25:0)
at async server.js:17391:21
at async Promise.all (index 0)
at async getRouteData (.nuxt/utils.js:181:0)
at async Promise.all (index 0)
at async setContext (.nuxt/utils.js:266:0)
at async createApp (.nuxt/index.js:169:0)
at async module.exports.webpack_exports.default (.nuxt/server.js:81:0)

What version of the package are you using?

1.12.1

[cjpillsbury]

Thanks for the feedback, @theazgra! We'll be sure to check this out ASAP. If possible, providing a minimal reproducible example via a public repo or codesandbox or similar is always helpful.

[theazgra]

@cjpillsbury Here is the public repo with reproduction https://github.com/theazgra/NuxtMuxPlayerBug :)

[cjpillsbury]

@theazgra well this looks a lot better I hope:

Recently some erroneous updates made their way into our package.json files. I reverted them but looks like I missed one in playback core. I'll get the simple fix merged and released as a canary release for you to confirm against on your side before we kick out an official release.

[cjpillsbury]

@theazgra 1.12.1-canary.0-ca05490 should fix your issue! lmk if it works for you whenever you get a chance

[theazgra]

@cjpillsbury That fixes it for us, thank you! 🥳

[lairdkruger]

In case it's useful I'm getting the same error with my Next.js app.
Can confirm that removing package json type also fixes it on my end.