'verovio-module.js' does not provide an export named 'default'

[sonovice]

Describe the problem
When using the official NPM package, this code works without any problems:

Shell:

npm install verovio

JS:

import createVerovioModule from 'verovio/wasm';
import { VerovioToolkit } from 'verovio/esm';

const mei_string = "..."; // some valid MEI data

createVerovioModule().then(VerovioModule => {
    const vrv = new VerovioToolkit(VerovioModule);
    vrv.loadData(mei_string);
    const data = vrv.renderToSVG(1);
    console.log(data);
});

However, if I build the package locally using the emscripten/buildNpmPackage script and try to use it, it fails with the following error:

Uncaught SyntaxError: The requested module '/@fs/home/simon/Repositories/verovio/emscripten/npm/dist/verovio-module.js' does not provide an export named 'default'

To Reproduce
Steps to reproduce the behavior:

mkdir -p ~/verovio
git clone https://github.com/rism-digital/verovio ~/verovio
cd verovio/emscripten
./buildNpmPackage

cd ~/app # go to JS source code
npm install ~/verovio/emscripten/npm
npm run dev # depends on the project, of course

Environment information (as appropriate)

• OS: Linux x64 with Kernel v6.0.6
• Emscripten: v3.1.28
• Browser: All

[WolfgangDrescher]

Are you using "type": "module" in your package.json? There was no full support for asynchronous ES6 modules in emscripten until v3.1.27. This is why the current build of verovio-module.js is actually a CommonJS module. ESM can import CommonJS modules if they just expose a default export (which is the case for verovio). If you have "type": "module" in your package.json, then .js files will be treated as ESM (".mjs"). You can force CommonJS modules by using .cjs as file extension:

https://stackoverflow.com/a/57492606/9009012

Node.js will treat .cjs files as CommonJS modules and .mjs files as ECMAScript modules. It will treat .js files as whatever the default module system for the project is (which is CommonJS unless package.json says "type": "module",).

Recently there was some progress and emscripten-core/emscripten#11792 was implemented in emscripten-core/emscripten#17915.

We could enforce em++ v3.1.27 and try to add -sEXPORT_ES6 to ./buildToolkit. I can test this and contribute with a PR if everything works fine. Depending on your bundler this still could not be enough to run everything with native ECMAScript modules. Check this comment for reference: emscripten-core/emscripten#11792 (comment). There seems to be a solution for Rollup.js but I have not tested this yet.

[sonovice]

Thank you for looking into this, @WolfgangDrescher .

I could actually fix it by simply adding export default createVerovioModule; as last line in verovio-module.js. Though I am not that proficient with JS module architectures so this might be a crude hack.

[WolfgangDrescher]

I could actually fix it by simply adding export default createVerovioModule; as last line in verovio-module.js. Though I am not that proficient with JS module architectures so this might be a crude hack.

I did the same for a while. It works well until you have some edge cases where you mix CommonJS and ECMAScript modules, because there are still some imports of modules in verovio-module.js with require() statements ("path", "fs", "crypto"). When running in web environments you should be fine as these imports will be ignored. But running in Node.js setups you could run into problems running when mixing ESM and CJS.

[WolfgangDrescher]

Btw. in case you are running Vite in your project. I could get around some problems with this config:

// vite.config.js
export default {
    optimizeDeps: {
        include: [
            'verovio/wasm',
            'verovio/wasm-hum',
        ],
    },
};

[sonovice]

Thank you vor the vite config, that works great!

[WolfgangDrescher]

#3174 has been merged. It should fix this issue with the next release so I think this can be closed.

[WolfgangDrescher]

Note that with verovio v3.14.0 when importing verovio/esm in a web worker in combination with Vite you will need this in your vite.config.js:

// vite.config.js
export default {
    worker: {
        format: 'es',
    },
};

https://vitejs.dev/config/worker-options.html#worker-format