Electron-Forge启动报错：未找到对应平台的原生构建文件

启动应用时出现以下错误：

yarn run v1.22.19
$ electron-forge start
✔ Checking your system
✔ Locating application
✔ Loading configuration
✔ Preparing native dependencies: 2 / 2 [0.3s]
✔ Running generateAssets hook
✔ [plugin-webpack] Compiling main process code [1s]                                                                                                                                                                                                                                            
✔ [plugin-webpack] Launching dev servers for renderer process code [0.8s]                                                                                                                                                                                                                       
  › Output Available: http://localhost:9000


App threw an error during load
Error: No native build was found for platform=win32 arch=x64 runtime=electron abi=114 uv=1 libc=glibc node=18.14.0 electron=24.3.0 webpack=true
    loaded from: E:\Programming\skynet\.webpack

  › Output Available: http://localhost:9000


App threw an error during load
Error: No native build was found for platform=win32 arch=x64 runtime=electron abi=114 uv=1 libc=glibc node=18.14.0 electron=24.3.0 webpack=true

    at load.resolve.load.path (E:\Programming\skynet\.webpack\main\index.js:28919:9)
    at load (E:\Programming\skynet\.webpack\main\index.js:28881:30)
    at ./node_modules/ref-napi/lib/ref.js (E:\Programming\skynet\.webpack\main\index.js:40329:111)
    at __webpack_require__ (E:\Programming\skynet\.webpack\main\index.js:95778:42)
    at ./node_modules/chrome-speech-recognition/dist/utils/hideChromeInstance.js (E:\Programming\skynet\.webpack\main\index.js:3929:36)
    at __webpack_require__ (E:\Programming\skynet\.webpack\main\index.js:95778:42)
    at ./node_modules/chrome-speech-recognition/dist/index.js (E:\Programming\skynet\.webpack\main\index.js:3897:46)
    at __webpack_require__ (E:\Programming\skynet\.webpack\main\index.js:95778:42)
    at ./server/resolveCommand.ts (E:\Programming\skynet\.webpack\main\index.js:57997:53)
    at __webpack_require__ (E:\Programming\skynet\.webpack\main\index.js:95778:42)
Done in 36.28s.

项目配置文件如下：

package.json #

{
  "name": "skynet",
  "productName": "skynet",
  "version": "1.0.0",
  "description": "",
  "main": ".webpack/main",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint --ext .ts,.tsx ."
  },
  "keywords": [],
  "author": {
    "name": "",
    "email": ""
  },
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^6.1.1",
    "@electron-forge/maker-deb": "^6.1.1",
    "@electron-forge/maker-rpm": "^6.1.1",
    "@electron-forge/maker-squirrel": "^6.1.1",
    "@electron-forge/maker-zip": "^6.1.1",
    "@electron-forge/plugin-webpack": "^6.1.1",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "@vercel/webpack-asset-relocator-loader": "1.7.3",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.0.0",
    "electron": "^24.3.0",
    "electron-squirrel-startup": "^1.0.0",
    "eslint": "^8.0.1",
    "eslint-plugin-import": "^2.25.0",
    "express": "^4.18.2",
    "fork-ts-checker-webpack-plugin": "^7.2.13",
    "node-loader": "^2.0.0",
    "socket.io": "^4.6.1",
    "socket.io-client": "^4.6.1",
    "style-loader": "^3.0.0",
    "ts-loader": "^9.2.2",
    "ts-node": "^10.0.0",
    "typescript": "~4.5.4"
  },
  "dependencies": {
    "chrome-speech-recognition": "^1.0.1"
  }
}

.webpack.rules.ts #

import type { ModuleOptions } from 'webpack';

export const rules: Required<ModuleOptions>['rules'] = [
  // Add support for native node modules
  {
    // We're specifying native_modules in the test because the asset relocator loader generates a
    // "fake" .node file which is really a cjs file.
    test: /native_modules[/\\].+\.node$/,
    use: 'node-loader',
  },
  {
    test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
      },
    },
  },
];

解决建议 #

• 重新编译原生模块：Electron的ABI版本与Node.js不同，依赖的原生模块需要针对Electron重新编译。安装electron-rebuild开发依赖，然后运行重建命令：

  yarn add -D electron-rebuild
  npx electron-rebuild
  

• 调整Webpack规则：针对ref-napi这类原生模块，修改.webpack.rules.ts，添加单独的处理规则，避免asset-relocator-loader干扰：

  // 在rules数组中添加
  {
    test: /ref-napi[/\\]lib[/\\]ref\.js$/,
    resolve: {
      aliasFields: ['browser'],
    },
  }
  

  或者尝试将ref-napi添加到Webpack的externals配置中（需要在主Webpack配置文件中设置，比如.webpack.main.config.ts）：

  export default {
    // ...其他配置
    externals: {
      'ref-napi': 'commonjs ref-napi',
    },
  };
  

• 检查依赖兼容性：chrome-speech-recognition版本可能较旧，不兼容Electron 24。可以尝试降级Electron版本（比如降到v18-v20），或者寻找替代包实现语音识别功能。

• 清理缓存后重装依赖：删除node_modules、.webpack目录和yarn.lock文件，重新安装依赖并启动：

  rm -rf node_modules .webpack yarn.lock
  yarn install
  yarn start
  

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