使用Electron Builder打包React应用时出现__SECRET_INTERNALS相关错误

错误详情 #

Uncaught TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')
at 289 (react-jsx-runtime.production.min.js:10:136)
at d (bootstrap:19:22)
at 115 (jsx-runtime.js:4:20)
at d (bootstrap:19:22)
at make namespace object:6:63
at index.tsx:8:17
at index.tsx:8:17
at universalModuleDefinition:7:233
at universalModuleDefinition:1:1

错误指向index.tsx最后一行，代码如下：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { All_Channels } from '../main/preload';

const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container);
root.render(<App />);

项目构建结构 #

release
├── app
├── dist
│   └── main
│       ├── main.js
│       ├── main.js.map
│       ├── preload.js
│       └── preload.js.map
└── renderer
    ├── index.html
    ├── renderer.js
    ├── renderer.js.LICENSE.txt
    ├── renderer.js.map
    ├── search.html
    ├── style.css
    └── style.css.map
node_modules
├── package-lock.json
├── package.json
└── yarn.lock

注：dist目录下的node_modules中存在React，但应用无法正确读取。使用设备为Silicon Mac。

Electron-Builder配置 #

"build": {
  "productName": "ElectronReact",
  "appId": "org.erb.ElectronReact",
  "asar": true,
  "asarUnpack": "**\\*.{node,dll}",
  "afterSign": ".erb/scripts/notarize.js",
  "mac": {
    "target": {
      "target": "default",
      "arch": [
        "arm64"
      ]
    },
    "type": "distribution",
    "hardenedRuntime": true,
    "entitlements": "assets/entitlements.mac.plist",
    "entitlementsInherit": "assets/entitlements.mac.plist",
    "gatekeeperAssess": false
  },
  "dmg": {
    "contents": [
      {
        "x": 130,
        "y": 220
      },
      {
        "x": 410,
        "y": 220,
        "type": "link",
        "path": "/Applications"
      }
    ]
  },
  "win": {
    "target": [
      "nsis"
    ]
  },
  "linux": {
    "target": [
      "AppImage"
    ],
    "category": "Development"
  },
  "directories": {
    "app": "release/app",
    "buildResources": "assets",
    "output": "release/build"
  },
  "extraResources": [
    "./assets/**"
  ],
  "includeSubNodeModules": true,
  "publish": {
    "provider": "github",
    "owner": "electron-react-boilerplate",
    "repo": "electron-react-boilerplate"
  }
}

排查与解决方案 #

• 版本一致性检查：确保react和react-dom版本完全一致，版本不匹配会导致内部依赖引用失败。
• Renderer进程打包配置：检查渲染进程的Webpack配置，确认没有错误地将react/react-dom加入externals列表，导致打包时未将依赖包含进去。
• Asar打包测试：临时将asar设置为false，重新打包运行，排查是否是asar压缩导致模块路径解析异常。
• 依赖目录验证：确认release/app目录下包含渲染进程所需的node_modules，includeSubNodeModules配置是否覆盖到了renderer相关的依赖。
• 清理缓存重建：删除node_modules、dist、release目录，重新执行npm install或yarn install，再重新构建打包。

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