Electron+React+SQLite3项目引入electron报fs.existsSync不存在错误

错误原因 #

1. 核心原因：你使用的create-react-app（react-scripts）默认构建配置会将所有import/require引入的依赖打包到前端bundle中，而electron是仅Electron运行时提供的原生模块，不能被webpack打包为浏览器侧代码，打包后的代码运行时找不到Node.js内置的fs模块，就会抛出fs.existsSync is not a function错误。
2. 次要原因：Electron 12+版本默认开启contextIsolation（上下文隔离），即便你开启了nodeIntegration，上下文隔离开启状态下渲染进程仍然无法直接访问Node.js API，也会导致引入electron失败。

解决步骤 #

1. 修改主进程窗口配置 #

修改public/main.js中BrowserWindow的webPreferences配置，新增contextIsolation: false关闭上下文隔离：

webPreferences: {
    nodeIntegration: true,
    enableRemoteModule: true,
    contextIsolation: false, // 新增该行配置
}

2. 配置webpack排除Node原生模块 #

无需eject react-scripts，使用react-app-rewired+customize-cra修改构建配置，告知webpack不需要打包electron等Node原生模块，运行时直接从Electron环境读取：

• 首先安装修改配置所需依赖：
  npm install react-app-rewired customize-cra --save-dev
• 项目根目录新建config-overrides.js文件，写入以下内容：

const { override, addWebpackExternals } = require('customize-cra');

module.exports = override(
  addWebpackExternals({
    electron: 'commonjs electron',
    sqlite3: 'commonjs sqlite3'
  })
);

• 修改package.json中的react相关运行脚本，将react-scripts替换为react-app-rewired：

"scripts": {
    "react:start": "react-app-rewired start",
    "react:build": "react-app-rewired build",
    "react:test": "react-app-rewired test",
    "react:eject": "react-scripts eject",
    // 其余脚本保持不变
}

3. 调整渲染进程引入方式 #

在React组件中使用window.require引入electron，避免被webpack拦截处理：

const { ipcRenderer } = window.require('electron');

修改完成后重新执行npm run start即可正常实现主渲染进程通信，完成SQLite数据插入逻辑。

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