我有一个库,我可以使用Emscripten
生成的.html文件成功构建和运行。我现在想将它与React一起使用,但是,我得到一个MIME类型错误,我无法修复。以下是我生成React应用程序和.wasm文件的步骤
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}
我希望能够在Stackoverflow
中导入stackoverflow.js
对象
App.js
...
import Stackoverflow from './stackoverflow';
console.log(Stackoverflow());
...
但是,dev服务器无法加载,控制台会显示这些警告。
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
报告的第一个错误说MIME类型错误,this问题告诉我更新node-mime
和webpack-dev-server
。 node-mime
不在我的node_modules
中,但webpack-dev-server
是和this问题,这显然解决了我的问题可以在3.3.1上找到。
$ npm run eject
然后我将我的webpack-dev-server
版本更改为3.3.1并安装。
现在我运行npm run start
并逐步执行代码,我可以确认我到达了正确的开发服务器。
但我的错误仍然存在。我觉得我在这里遗漏了一些明显的东西。
我必须做几件事才能让它工作,我的大部分故障排除都是徒劳的(开发服务器根本没有提供.wasm文件,当它无法找到你时,它会回到.html上想要,这是我的MIME错误的来源)。
如何让EMSCRIPTEN JAVASCRIPT使用create-react-app
emcc
的.wasm输出复制到react-app/public
文件夹cp stackoverflow.wasm gifsicle-react/public/stackoverflow.wasm
eslint-disable
添加到文件的顶部(我使用此sed命令)sed -i.old '1s;^;\/* eslint-disable *\/;' stackoverflow.js
.wasm
文件的相对路径。 (这对于获取/public
目录中的文件是必要的)sed -i.old "s|stackoverflow.wasm|/stackoverflow.wasm|" stackoverflow.js
sed -i.old "s|wasmBinaryFile = locateFile|// wasmBinaryFile = locateFile|" stackoverflow.js
我最后写了this博客文章,其中详细介绍了我如何管理这个问题。