React/Node.js新手求助：如何解决Wasm模块导入错误？

方法1：升级Automerge相关包版本 #

这个错误大概率是版本不兼容导致的，先尝试更新包：

• 卸载旧版本：npm uninstall @automerge/automerge-wasm
• 安装最新稳定版：npm install @automerge/automerge-wasm@latest
• 若项目依赖@automerge/automerge核心包，需保证两者版本匹配：npm install @automerge/automerge@latest @automerge/automerge-wasm@latest

方法2：调整Webpack转译配置 #

如果项目使用Webpack（包括Create React App），需要让babel转译automerge-wasm包：

普通Webpack项目 #

修改webpack.config.js中的babel-loader规则，将@automerge/automerge-wasm排除在忽略转译的列表外：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 不对node_modules下除automerge-wasm外的包转译
        exclude: /node_modules\/(?!@automerge\/automerge-wasm)/,
        use: 'babel-loader'
      }
    ]
  }
};

Create React App项目 #

需借助react-app-rewired或craco修改默认配置：

1. 安装依赖：npm install react-app-rewired --save-dev
2. 在项目根目录创建config-overrides.js：

module.exports = function override(config) {
  // 让babel转译automerge-wasm
  config.module.rules[0].exclude = /node_modules\/(?!@automerge\/automerge-wasm)/;
  return config;
};

3. 修改package.json里的启动命令：将react-scripts替换为react-app-rewired，比如"start": "react-app-rewired start"

方法3：临时修改导入方式（应急方案） #

如果前两种方法暂时无法生效，可以尝试修改导入逻辑适配默认导出：

// 替代原来的命名导入
import wasmModule from "@automerge/automerge-wasm/bundler/automerge_wasm_bg.js";
const { memory, buffer } = wasmModule;

注意：这个方法属于临时 workaround，包更新后可能失效，优先推荐前两种方案。

内容的提问来源于stack exchange，提问作者user1976625