运行gatsby develop时cardano-serialization-lib-browser报意外字符错误如何解决

该报错根因是Gatsby默认Webpack配置未开启WebAssembly支持，无法正确解析cardano-serialization-lib依赖中的.wasm二进制文件，将二进制内容当成普通文本解析触发了非法字符报错。你可以按以下步骤逐一排查解决：

步骤1：安装wasm加载依赖 #

• 安装webpack对应的wasm加载器：
  npm install wasm-loader --save-dev
  若使用yarn包管理器执行：
  yarn add wasm-loader --dev

步骤2：修改Gatsby Webpack配置 #

• 打开项目根目录下的gatsby-node.js文件，添加如下配置：

  exports.onCreateWebpackConfig = ({ actions }) => {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /\.wasm$/,
            use: 'wasm-loader',
          }
        ]
      },
      experiments: {
        asyncWebAssembly: true
      }
    })
  }
  

  如果文件中已经存在onCreateWebpackConfig钩子，只需合并上述的rules和experiments配置即可，无需重复定义整个钩子函数

步骤3：清理缓存重启服务 #

• 先执行Gatsby缓存清理命令，避免旧缓存导致配置不生效：
  gatsby clean
• 再重新启动开发服务：
  gatsby develop

异常兜底方案 #

如果上述操作后仍报错，可尝试重装全量依赖：

1. 删除node_modules文件夹和包锁文件（package-lock.json/yarn.lock）
2. 重新执行npm install或yarn install安装依赖
3. 再次执行gatsby clean && gatsby develop启动服务

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