React中导入Emscripten编译的WebAssembly JS模块报错问题

你遇到的问题核心是：尽管部署在Nginx（HTTP/HTTPS协议）环境，但Emscripten生成的JS模块仍然尝试通过file://协议加载WASM文件，这是因为模块默认的资源定位逻辑没有适配React项目的构建路径规则。

可能的原因 #

• Emscripten生成的JS模块中，WASM文件的加载路径未正确配置，导致模块在React构建后的环境中仍使用非HTTP协议的方式查找资源。
• React构建工具（如Webpack）对静态资源的处理方式，使得WASM文件的实际访问路径与模块预期的路径不匹配。

解决方案 #

1. 调整Emscripten编译参数，指定WASM文件路径 #

修改编译脚本，添加-s WASM_PATH='"./my-module.wasm"'参数，强制模块使用相对路径加载WASM文件：

emcc \
${OPTIMIZE} \
--bind \
--no-entry \
-s STRICT=1 \
-s ALLOW_MEMORY_GROWTH=1 \
-s MALLOC=emmalloc \
-s MODULARIZE=1 \
-s EXPORT_ES6=1 \
-s ENVIRONMENT=web \
-s WASM_PATH='"./my-module.wasm"' \  # 新增参数
-o ./my-module.js \
src/wasm/my-module.cpp

2. 在React中调用模块时指定资源定位函数 #

如果编译参数调整后仍有问题，可在调用myModule()时传入locateFile配置，手动指定WASM文件的正确访问路径：

import { useEffect } from 'react';
import myModule from './wasm/dist/my-module'
import './App.css';

function App() {
  useEffect(() => {
    // 根据React构建后的实际资源路径调整，示例为WASM文件部署在/wasm/dist/目录下
    myModule({
      locateFile: (filename) => `/wasm/dist/${filename}`
    }).then((output: unknown) => console.log(output))
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <h1>Docker Wasm Builder.</h1>
      </header>
    </div>
  );
}

export default App;

3. 确保WASM文件被React构建工具正确处理 #

• 将WASM文件移至React项目的public/wasm/dist/目录下，这样构建工具会直接将该文件复制到产物目录，保证路径可访问。
• 若使用自定义Webpack配置，需在webpack.config.js中添加WASM文件的处理规则：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'asset/resource',
        generator: {
          filename: 'wasm/dist/[name][ext]'
        }
      }
    ]
  }
};

验证步骤 #

1. 重新编译C++代码，生成新的JS和WASM模块。
2. 重新构建React项目并部署到Nginx。
3. 打开Chrome控制台，检查网络请求，确认WASM文件通过HTTP/HTTPS协议成功加载。

内容的提问来源于stack exchange，提问作者James Kanin Kearpimy