I’m importing ToneJS in a project and it works fine when running the game in preview mode.
But when the game is built, there is an uncaught runtime error occurring with the following message: TypeError: Symbol.hasInstance is read-only.
I reproduced this error in a real small project with the following steps:
Install ToneJS: npm i tone
Create a Node and a Scene
Create a component with the following content and attach it to the only Node of the scene:
import { _decorator, Button, EventHandler } from 'cc';
import Tone from 'tone';
const { ccclass } = _decorator;
@ccclass('TonePlayground')
export class TonePlayground extends Button {
start() {
const synth = new Tone.Synth().toDestination();
this.node.on('click', () => {
synth.triggerAttackRelease('C2', '8n');
});
}
}
Build the project and run it
I’ve had the issue with Cocos Creator 3.6.2 and 3.7.2 and have not tried any other version.
{
"name": "tone",
"version": "14.7.77",
"description": "A Web Audio framework for making interactive music in the browser.",
"main": "build/Tone.js",
"module": "build/esm/index.js",
"types": "build/esm/index.d.ts",
"files": [
"README.md",
"LICENSE.md",
"build",
"docs",
"Tone"
],
Yet, Cocos Creator imports build/Tone.js (in the Editor and when building). Is there any way to configure this in the Editor so ESM are actually used when available?
EDIT: I misread the “type: module” rule and tried to modifiy it for testing purposes and ended up with the lib not available in the Editor.
I tried to import rxjs as well and have had an issue too right in the Cocos Editor.
here’s the project log
4-3-2023 15:27:58 - error: [Scene] {hidden(::SceneExecutorImportExceptionHandler::)} Error: Error: Unexpected export statement in CJS module.
at @:1:8
at Object.execute (file:///Users/filipe.dossantos/Workspace/Sandbox/CocosToneJS/temp/programming/packer-driver/targets/editor/chunks/4b/data:text/javascript,%0A%2F%2F%20This%20module%20is%20auto-generated%20to%20report%20error%20emitted%20when%20try%20to%20load%20module%20file%3A%2F%2F%2FUsers%2Ffilipe.dossantos%2FWorkspace%2FSandbox%2FCocosToneJS%2Fnode_modules%2Frxjs%2Fdist%2Fesm5%2Findex.js%20at%20runtime.%0Athrow%20new%20Error(%60Error%3A%20Unexpected%20export%20statement%20in%20CJS%20module.%0A%20%20at%20%40%3A1%3A8%60)%3B%0A%20%20%20%20%20%20%20%20:3:7)
at doExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:517:30)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:508:21)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:491:10)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:491:10)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:440:12Error: [Scene] {hidden(::SceneExecutorImportExceptionHandler::)} Error: Error: Unexpected export statement in CJS module.
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:508:21)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:491:10)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:491:10)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:440:12
at Logger._logHandler (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/scene/dist/script/3d/manager/startup/log.ccc:1:318)
at Logger.record (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@base/electron-logger/lib/renderer.ccc:1:458)
at console.error (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@base/electron-logger/lib/renderer.ccc:1:1414)
at ScriptManager._handleImportException (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/scene/dist/script/3d/manager/scripts.ccc:1:5259)
at Executor.importExceptionHandler [as _importExceptionHandler] (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/scene/dist/script/3d/manager/scripts.ccc:1:3396)
at Executor._onModuleLoaded (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/src/executor/index.ts:316:22)
at SystemJS.onload (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/src/executor/index.ts:77:18)
at triggerOnload (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:270:10)
at doExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:538:7)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:508:21)
4-3-2023 15:27:58 - warn: [Scene] Missing class: 34b2abKryJMm6nnBIQzE/PwError: [Scene] Missing class: 34b2abKryJMm6nnBIQzE/Pw
at Object.classFinder (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/missing-class-reporter.ccc:1:2131)
at _Deserializer.classFinder [as _classFinder] (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:128881:34)
at _Deserializer._deserializeTypeTaggedObject (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:38558:30)
at _Deserializer._deserializeObject (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:38499:29)
at _Deserializer._deserializeAndAssignField (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:38707:38)
at _Deserializer._deserializeArray (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:38533:40)
at _Deserializer._deserializeObject (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:38505:29)
4-3-2023 15:27:58 - error: [Scene] Script "34b2abKryJMm6nnBIQzE/Pw" attached to "TonePlayground" is missing or invalid. Detailed information:
Node path: "Canvas/TonePlayground"
Script UUID: "34b2a6ca-af22-4c9b-a9e7-04843313f3f0"
Class ID: "34b2abKryJMm6nnBIQzE/Pw"
Error: [Scene] Script "34b2abKryJMm6nnBIQzE/Pw" attached to "TonePlayground" is missing or invalid. Detailed information:
Node path: "Canvas/TonePlayground"
Script UUID: "34b2a6ca-af22-4c9b-a9e7-04843313f3f0"
Class ID: "34b2abKryJMm6nnBIQzE/Pw"
at report (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/missing-class-reporter.ccc:1:1156)
at reportByWalker (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/missing-class-reporter.ccc:1:1252)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/missing-class-reporter.ccc:1:1893
at ObjectWalkerBehavior.walk (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/object-walker.ccc:1:2355)
at ObjectWalkerBehavior.forEach (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/object-walker.ccc:1:825)
at ObjectWalkerBehavior.parseObject (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/object-walker.ccc:1:306)
at doWalkProperties (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/object-walker.ccc:1:2148)
4-3-2023 15:28:18 - log: [Window] Deprecated as of 10.7.0. highlight(lang, code, ...args) has been deprecated.
4-3-2023 15:28:18 - log: [Window] Deprecated as of 10.7.0. Please use highlight(code, options) instead.
https://github.com/highlightjs/highlight.js/issues/2277
4-3-2023 15:35:43 - error: [Scene] {hidden(::SceneExecutorImportExceptionHandler::)} Error: Error: Unexpected export statement in CJS module.
at @:1:8
at Object.execute (file:///Users/filipe.dossantos/Workspace/Sandbox/CocosToneJS/temp/programming/packer-driver/targets/editor/chunks/4b/data:text/javascript,%0A%2F%2F%20This%20module%20is%20auto-generated%20to%20report%20error%20emitted%20when%20try%20to%20load%20module%20file%3A%2F%2F%2FUsers%2Ffilipe.dossantos%2FWorkspace%2FSandbox%2FCocosToneJS%2Fnode_modules%2Frxjs%2Fdist%2Fesm5%2Findex.js%20at%20runtime.%0Athrow%20new%20Error(%60Error%3A%20Unexpected%20export%20statement%20in%20CJS%20module.%0A%20%20at%20%40%3A1%3A8%60)%3B%0A%20%20%20%20%20%20%20%20:3:7)
at doExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:517:30)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:508:21)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:491:10)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:491:10)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:440:12Error: [Scene] {hidden(::SceneExecutorImportExceptionHandler::)} Error: Error: Unexpected export statement in CJS module.
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:508:21)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:491:10)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:493:28
at Array.forEach (<anonymous>)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:491:10)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:440:12
at Logger._logHandler (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/scene/dist/script/3d/manager/startup/log.ccc:1:318)
at Logger.record (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@base/electron-logger/lib/renderer.ccc:1:458)
at console.error (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@base/electron-logger/lib/renderer.ccc:1:1414)
at ScriptManager._handleImportException (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/scene/dist/script/3d/manager/scripts.ccc:1:5259)
at Executor.importExceptionHandler [as _importExceptionHandler] (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/scene/dist/script/3d/manager/scripts.ccc:1:3396)
at Executor._onModuleLoaded (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/src/executor/index.ts:316:22)
at SystemJS.onload (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/src/executor/index.ts:77:18)
at triggerOnload (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:270:10)
at doExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:538:7)
at postOrderExec (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/node_modules/@editor/lib-programming/static/executor/systemjs-bridge/out/index.js:508:21)
4-3-2023 15:35:43 - warn: [Scene] Missing class: 34b2abKryJMm6nnBIQzE/PwError: [Scene] Missing class: 34b2abKryJMm6nnBIQzE/Pw
at Object.classFinder (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/missing-class-reporter.ccc:1:2131)
at _Deserializer.classFinder [as _classFinder] (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:128881:34)
at _Deserializer._deserializeTypeTaggedObject (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:38558:30)
at _Deserializer._deserializeObject (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:38499:29)
at _Deserializer._deserializeAndAssignField (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:38707:38)
at _Deserializer._deserializeArray (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:38533:40)
at _Deserializer._deserializeObject (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/resources/3d/engine/bin/.cache/dev/editor/bundled/index.js:38505:29)
4-3-2023 15:35:43 - error: [Scene] Script "34b2abKryJMm6nnBIQzE/Pw" attached to "TonePlayground" is missing or invalid. Detailed information:
Node path: "Canvas/TonePlayground"
Script UUID: "34b2a6ca-af22-4c9b-a9e7-04843313f3f0"
Class ID: "34b2abKryJMm6nnBIQzE/Pw"
Error: [Scene] Script "34b2abKryJMm6nnBIQzE/Pw" attached to "TonePlayground" is missing or invalid. Detailed information:
Node path: "Canvas/TonePlayground"
Script UUID: "34b2a6ca-af22-4c9b-a9e7-04843313f3f0"
Class ID: "34b2abKryJMm6nnBIQzE/Pw"
at report (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/missing-class-reporter.ccc:1:1156)
at reportByWalker (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/missing-class-reporter.ccc:1:1252)
at /Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/missing-class-reporter.ccc:1:1893
at ObjectWalkerBehavior.walk (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/object-walker.ccc:1:2355)
at ObjectWalkerBehavior.forEach (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/object-walker.ccc:1:825)
at ObjectWalkerBehavior.parseObject (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/object-walker.ccc:1:306)
at doWalkProperties (/Applications/CocosCreator/Creator/3.7.2/CocosCreator.app/Contents/Resources/app.asar/builtin/engine/dist/editor-extends/missing-reporter/object-walker.ccc:1:2148)
Here the esm seems to be loaded but as a CJS modules (resulting then in an error when trying to load)
It’s good new that this particular issue would be fixed. That said, there are a fair amount of npm packages that crashes both in the editor and when running a game.
See my last answer here about RxJS. The same problem has been observed with other npm packages that export ESModules. So I think there is an issue there.
To emphasize this, there are also problems when importing npm packages and trying to destructure import statements. Try installing @reduxjs/toolkit and then
import { createSlice } from '@reduxjs/toolkit'
console.log(createSlice) // outputs undefined
This will output undefined because the CJS version seems to be loaded somehow and then, only default exists. For now, I circumvent that issue like this:
import toolkit from '@reduxjs/toolkit'
const { createSlice } = toolkit
But this isn’t ideal as the IDE autoimport cannot generate this.
I tried different things with the tsconfig.json but could not manage to have this work like it should.
So if you can provide a solution (at least for RxJS) or have a look into that issue, it would be awesome