Updating Javascript code leads to not being able to find/load binary

[netolcc06]

Hello guys,

Recently I managed to get a working version of cvc5 compiled with Emscripten 3.1.70. After that, I started a new saga, which is updating the application cvc5_web to use a modularized version of cvc5 - it uses Emscripten 3.1.18 since forever.

I used the flags:

-s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]' -s ENVIRONMENT=web -s EXPORTED_FUNCTIONS=_main -s INVOKE_RUN=1 -s EXIT_RUNTIME=0 -s INCOMING_MODULE_JS_API=arguments,canvas,monitorRunDependencies,print,setStatus -sALLOW_MEMORY_GROWTH -sASSERTIONS -sNO_DISABLE_EXCEPTION_CATCHING -s EXPORT_ES6=1 -s USE_ES6_IMPORT_META=0 -s MODULARIZE

The point here would be having new wasm and cvc5.js files to keep the tool working. Spoiler: it didn't work. It feels like the issue I'm having is related to the one described here: #13074

One interesting thing about the solution proposed by @donalffons is that previously I didn't need to do any of this to have cvc5_web running properly, but somehow my current configs do not work with the new binary and glue code.

• Old binary + old glue code => page works

• New Binary with old modularized glue code

Unhandled Rejection (RuntimeError): Aborted(TypeError: WebAssembly.instantiate(): Import #0 "env": module is not an object or function)
I wouldn't expect this to work ofc, but it is interesting that the binary can be found, but not instantiated. I can also see that scriptDir is set as http://localhost:8080/cvc5_web/ and
wasmBinaryFile as http://localhost:8080/cvc5_web/cvc5.wasm

• New Binary + new glue code

If I try the new files, it simply can't find / instantiate the wasm file.

./src/wasm/cvc5.js 349:22
Module parse failed: Unexpected token (349:22)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|         receiveInstance(result["instance"]);
|       }
>       wasmBinaryFile ??= findWasmBinary();
|       instantiateAsync(wasmBinary, wasmBinaryFile, info, receiveInstantiationResult).catch(readyPromiseReject);
|       return {};

• New binary + new glue code with hardcoded scriptDirectory and wasmBinaryFile

./src/wasm/cvc5.js 446:23
Module parse failed: Unexpected token (446:23)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     var stackSave = () => _emscripten_stack_get_current();
|     var warnOnce = text => {
>       warnOnce.shown ||= {};
|       if (!warnOnce.shown[text]) {
|         warnOnce.shown[text] = 1;

---

I also tried a few suggestions from https://stackoverflow.com/questions/63423384/you-may-need-an-additional-loader-to-handle-the-result-of-these-loaders, but with no success.

Fundamentally, why can't the new glue code find the binaries, if the old one could? What exactly cannot be handled by these loaders after I pass the hardcoded path to my binary?

As you might have noticed, I'm not experienced with Javascript and all related environments.

[sbc100]

Just to to clear are the errors you are reporting here coming from or related to webpack? Is that what cvc5_web means?

If possible you could try bisecting to see which version of emscripten broke your build: https://emscripten.org/docs/contributing/developers_guide.html#bisecting

[netolcc06]

Just to to clear are the errors you are reporting here coming from or related to webpack? Is that what cvc5_web means?

If possible you could try bisecting to see which version of emscripten broke your build: https://emscripten.org/docs/contributing/developers_guide.html#bisecting

Yes, the project was bootstrapped with Create React App, which relies on Webpack. The point is trying to figure out why old versions can be loaded/instantiated with a simple setup, but not the new ones.

I'll try other approaches based on #13074 and let you know if anything works.

[sbc100]

Yes, the project was bootstrapped with Create React App, which relies on Webpack. The point is trying to figure out why old versions can be loaded/instantiated with a simple setup, but not the new ones.

So the error you are seeing is happening at webpack time? Not at runtime right?

I think the key figuring out what is broken is going to be figuring out which change caused the breakage, so I possible it would be great to bisect to figure out which change it was.

We can and should also look into adding tests to emscripten that use webpack in the way that you are doing to ensure we don't break this setup again going forward. But first we need to figure out what it is that webpack doens't like about the current emscripten output.

[sbc100]

Oh wait.. looking at the error lines it looks like webpack doesn't like the ??= and '||=` operators. Perhaps its configured not accept those relatively new JS features (Nullish coalescing assignment and Logical OR assignment).

[kripken]

@netolcc06 If the issue is ??=, ||= as @sbc100 says, then maybe you can tell webpack to accept newer JS features? If not, then you can work around this by lowering the Emscripten output to an earlier version of JS. Running Babel yourself can do that, or you can tell Emscripten to (-sLEGACY_VM_SUPPORT, or more specifically you can set one of the browser versions to an earlier-enough number, -sMIN_CHROME_VERSION=84 might work according to MDN).

[netolcc06]

Oh wait.. looking at the error lines it looks like webpack doesn't like the ??= and '||=` operators. Perhaps its configured not accept those relatively new JS features (Nullish coalescing assignment and Logical OR assignment).

That was the issue. Good point. I just replaced the expressions with the ??= and ||= operators and it went fine after hardcoding wasmBinaryFile. Not sure why, but the page takes waaaaay much more time to be generated now. With the old version, it was pretty much automatic. But that's another issue. I'll let you know if I figure out how to reference the binary without hardcoding its path in the server.

[sbc100]

I imagine you should be able to tell webpack to accept modern stuff like ??=. Does it have some kind of ecmascript version for its input files?

[sbc100]

If you want to use a dynamic path to your wasm file you might want to look at overriding the locateFile function: https://emscripten.org/docs/api_reference/module.html#Module.locateFile