How can I import Emscripten generated .wasm/js files in files created with create-react-app

Refresh

4 weeks ago

Views

3 time

0

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.

0 answers