WMR does not load WASM files from node_modules

[aduh95]

Describe the bug

WMR doesn't work well with packages that ship WASM binaries. I'd like to bundle a WASM file with my application and give its URL to the Emscripten module that loads it, but it seems WMR doesn't let me do that.

To Reproduce

yarn create wmr your-project-name
cd your-project-name
mkdir node_modules/test
curl -L https://github.com/mathiasbynens/small/raw/master/webassembly.wasm > node_modules/test/test.wasm
echo '{"name":"test","exports":"./test.wasm"}' > node_modules/test/package.json
echo 'export { default } from "url:test";' > public/index.js
yarn wmr build

This produces the following error message:

Could not load urlnpm/test/test.wasm (imported by public/index.js): ENOENT: no such file or directory, open npm/test/test.wasm'
error Command failed with exit code 1.

Expected behavior

I would expect WASM file to be treated as any other file. If there's a good reason to treat them differently, I'd like to find documentation on why this is not the case, and ideally having an option to chose which behaviour I want.

Additional context

If I want to do the same thing with Rollup, I have to use the @rollup/plugin-url:

import url from "@rollup/plugin-url";

export default {
  …
  plugins: [
    url({
      include: "**/*.wasm",
    }),
  ],
};

I don't know if it's related, but I've also noticed that if I try to use a npm package that includes a WASM binary yarn add it, the WASM file is not even downloaded.

$ echo 'export { default } from "url:@aduh95/viz.js/wasm";' > public/index.js
$ yarn wmr build
Could not load urlnpm/@aduh95/[email protected]/dist/render.wasm (imported by public/index.js): ENOENT: no such file or directory, open npm/@aduh95/[email protected]/dist/render.wasm'
$ ls node_modules/@aduh95/viz.js/dist/render.wasm
$ yarn add @aduh95/viz.js
$ ls node_modules/@aduh95/viz.js/dist/render.wasm
node_modules/@aduh95/viz.js/dist/render.wasm
$ yarn wmr build
Could not load urlnpm/@aduh95/[email protected]/dist/render.wasm (imported by public/index.js): ENOENT: no such file or directory, open npm/@aduh95/[email protected]/dist/render.wasm'

[developit]

Ah yes, we're filtering out wasm by accident.

Barring that, you can use the URL prefix to load WASM:

import url from 'url:./foo.wasm';

[aduh95]

@developit Thanks for the answer, however it seems it doesn't apply to WASM files inside node_modules folder:

rm -r your-project-name
yarn create wmr your-project-name
cd your-project-name
mkdir node_modules/test
curl -L https://github.com/mathiasbynens/small/raw/master/webassembly.wasm > public/test.wasm
echo '{"name":"test"}' > node_modules/test/package.json
echo 'export { default } from "url:test/test.wasm";' > public/index.js
yarn wmr build

Could not load urlnpm/test/test.wasm (imported by public/index.js): ENOENT: no such file or directory, open npm/test/test.wasm'

It does work for WASM file in the same directory (as in your example), so there's something related with the path resolution of node_modules I suppose.

[developit]

Ah yeah that's possible. Is this after running npm install to ensure the file is there? We don't currently stream wasm to disk during auto-install.

[aduh95]

Is this after running npm install to ensure the file is there?

Running npm install doesn't seem to help, the build fails anyway even though the WASM file is on the disk.