如何在使用create-react-app创建的文件中导入Emscripten生成的.wasm / js文件

Question

I have a library I can successfully build & run with the Emscripten generated .html files. I'd like to use it with React now, however, I get a MIME type error` which I can't fix. Here are the steps I take to generate the React app and .wasm files

npx create-react-app stackoverflow

DEST=stackoverflow/src/stackoverflow.html

sudo docker run --rm -v $(pwd):/src trzeci/emscripten emmake make

$ docker run --rm -v $(pwd):/src trzeci/emscripten emcc \
    ... o. files
    -s MODULARIZE=1 \
    -s ERROR_ON_UNDEFINED_SYMBOLS=0 \
    -s EXPORT_NAME=Stackoverflow \
    -o ${DEST}

# disable eslint for the generate file
sed -i '1s;^;/* eslint-disable */\n;' ${DEST}

I expect to be able to import the Stackoverflow object inside of stackoverflow.js

App.js
...

import Stackoverflow from './stackoverflow';
console.log(Stackoverflow());

...

However the dev server fails to load, and the console shows these warnings.

m streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
(anonymous) @ stackoverflow.js:1667
Promise.then (async)
createWasm @ stackoverflow.js:1663
Module.asm @ stackoverflow.js:1694
(anonymous) @ stackoverflow.js:5322
./src/App.js @ App.js:5
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
./src/index.js @ index.css?f3f6:45
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ stackoverflow.js:5867
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
stackoverflow.js:1668 falling back to ArrayBuffer instantiation
(anonymous) @ stackoverflow.js:1668
Promise.then (async)
createWasm @ stackoverflow.js:1663
Module.asm @ stackoverflow.js:1694
(anonymous) @ stackoverflow.js:5322
./src/App.js @ App.js:5
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
./src/index.js @ index.css?f3f6:45
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ stackoverflow.js:5867
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
stackoverflow.js:1654 failed to asynchronously prepare wasm: CompileError: AsyncCompile: Wasm decoding failed: expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

The first error reported says that the MIME type is wrong, and this question tells me to update node-mime and webpack-dev-server . node-mime isn't present in my node_modules , but webpack-dev-server is and this issue, which has apparently solved my problem is available on 3.3.1.

$ npm run eject

And then I change my webpack-dev-server version to 3.3.1 and install.

Now I run npm run start and step through the code, I can confirm I get to the correct dev-server.

Yet my error persists. I feel like I'm missing something obvious here.

Answer 1

I had to do a couple of things to get this to work, Most of my troubleshooting here was futile (the dev server was not serving the .wasm files at all, it falls back on the .html when it can't find what you want, this was the source of my MIME errors).

HOW TO MAKE EMSCRIPTEN JAVASCRIPT WORK WITH create-react-app

1. Copy the .wasm output of the emcc to the react-app/public folder cp stackoverflow.wasm gifsicle-react/public/stackoverflow.wasm
2. Add eslint-disable to the top of your files (I use this sed command) sed -i.old '1s;^;\\/* eslint-disable *\\/;' stackoverflow.js sed -i.old '1s;^;\\/* eslint-disable *\\/;' stackoverflow.js
3. Replace the relative path of the .wasm file in the .js with an absolute one. (This is necessary to get files in the /public directory) sed -i.old "s|stackoverflow.wasm|/stackoverflow.wasm|" stackoverflow.js sed -i.old "s|stackoverflow.wasm|/stackoverflow.wasm|" stackoverflow.js
4. The generated javascript will try to resolve the path relative to the website directory. Comment out this line sed -i.old "s|wasmBinaryFile = locateFile|// wasmBinaryFile = locateFile|" stackoverflow.js sed -i.old "s|wasmBinaryFile = locateFile|// wasmBinaryFile = locateFile|" stackoverflow.js

I ended up writing this blog post which has more detail about how I managed this.