Wasm es6 modules fail to load with Jest, but work in Node

[modulitos]

🐛 Bug Report

I'm able to load an es6 module with Node, but I'm unable to load the same module when running with Jest. When I try loading the module with Jest, I get the following error:

node --experimental-modules --experimental-wasm-modules --experimental-vm-modules node_modules/.bin/jest

(node:72954) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use node --trace-warnings ... to show where the warning was created)
FAIL tests/test_jest.test.mjs
● Test suite failed to run

/Users/me/projects/bin_packing/jest-wasm/node_modules/bin_packer_3d/bin_packer_3d_wasm_bg.wasm:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){


SyntaxError: Invalid or unexpected token

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

To Reproduce

Steps to reproduce the behavior:

1. Clone this repo: https://github.com/modulitos/jest-wasm-esm-example
2. run npm run test-jest

Note that running npm run test-node loads the module successfully in Node. So why does it fail with Jest?

Expected behavior

The module loads when running npm run test-jest.

Link to repl or repo (highly encouraged)

https://github.com/modulitos/jest-wasm-esm-example

envinfo

❯ npx envinfo --preset jest
npx: installed 1 in 1.358s

System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 14.15.4 - ~/.asdf/installs/nodejs/14.15.4/bin/node
npm: 6.14.10 - ~/.asdf/installs/nodejs/14.15.4/bin/npm
npmPackages:
jest: ^26.6.3 => 26.6.3

[ahnpnl]

The error is about Jest module resolution tries to resolve bin_packer_3d as bin_packer_3d_wasm_bg.wasm while NodeJS module resolution resolves as bin_packer_3d_wasm_bg.js. Adjust moduleNameMapper to map bin_packer_3d to bin_packer_3d_wasm_bg.js should fix the error.

However, after correcting Jest module resolution, I ran into another error

 RUNS  __tests__/test_jest.test.mjs
Exception in PromiseRejectCallback:
/Users/ahn/jest-wasm-esm-example/node_modules/jest-runtime/build/index.js:586
    return module;

RangeError: Maximum call stack size exceeded
    at loadEsmModule (/Users/ahn/jest-wasm-esm-example/node_modules/jest-runtime/build/index.js:586:19)
    at linkModules (/Users/ahn/jest-wasm-esm-example/node_modules/jest-runtime/build/index.js:616:19)
    at /Users/ahn/jest-wasm-esm-example/node_modules/jest-runtime/build/index.js:572:18
    at node:internal/vm/module:320:30
    at SourceTextModule.<computed> (node:internal/vm/module:319:36)
    at link (node:internal/vm/module:197:22)
    at loadEsmModule (/Users/ahn/jest-wasm-esm-example/node_modules/jest-runtime/build/index.js:571:12)
    at linkModules (/Users/ahn/jest-wasm-esm-example/node_modules/jest-runtime/build/index.js:616:19)
    at /Users/ahn/jest-wasm-esm-example/node_modules/jest-runtime/build/index.js:572:18

which Idk how to solve.

If simply solving your original error, moduleNameMapper is enough.

[modulitos]

Thank you for the tip! I updated the repo with the correct moduleNameMapper config, and can confirm that I'm getting the same RangeError: Maximum call stack size exceeded problem.

Any suggestions for how I can troubleshoot this issue is appreciated 🙏

[ahnpnl]

Just now I noticed that it’s a combination of wasm + ESM. Maybe you should try jest@next first and if not working then go to the ESM tracking issue to mention this issue there.

[modulitos]

Ah, thanks again for the insight. Can you link me to the "ESM tracking issue"? I'm not sure what you're referring to, but happy to mention this issue there.

I updated to jest@next (updated the repo linked above as well), but now I'm getting this error:

TypeError: wasm.binpacker_packing_algorithm is not a function

It's a different error, but it seems like we're getting closer! But I'm still not sure how to debug this 🤔

[ahnpnl]

#9430

[SimenB]

Jest does not support WASM at this time. I'm not sure how support would be added. Is it enough to do WebAssembly.compile on the source code (sorta like the example here)?

I have zero idea how WASM works, so I can't really do much here. Are there any JS globals available in WASM? If not I guess just executing the file and returning the result should be enough?

[SimenB]

I guess reading https://github.com/WebAssembly/esm-integration/tree/master/proposals/esm-integration is a start

(I can almost guarantee I won't have the time or energy to work on this for some time, so if anybody wants to pick it up that'd be great!)

[modulitos]

Thanks everyone for the clarification! This makes much more sense now.

I didn't realize that WASM isn't supported in Jest - I was a little naive in thinking that if I can load a module in Node, then I should be able to load it in Jest.

I appreciate the help 🙏