在electron-react-boilerplate中使用better-sqlite3报构造函数错误求助

问题原因 #

这个错误常见有4个核心诱因：

1. better-sqlite3是Node原生模块，你直接将数据库操作代码放在了src/renderer目录下，代码运行在Electron渲染进程中，而Electron默认限制原生模块直接在渲染进程调用，且electron-react-boilerplate默认开启了上下文隔离，会直接拦截原生模块的引入
2. 项目Webpack没有将better-sqlite3标记为外部依赖，打包时直接将该模块打包进了渲染进程的bundle包，require引入时拿到的是被Webpack转义后的非正常导出对象
3. 原生模块没有针对当前使用的Electron版本做重编译，模块二进制和Electron运行环境不匹配
4. ESModule和CommonJS混用时的导出指向错误，引入时没有正确拿到默认导出的构造函数

解决步骤 #

• 调整代码逻辑，不要在渲染进程直接操作数据库：你可以把所有数据库操作逻辑迁移到Electron主进程，通过IPC通道和渲染进程做数据交互；也可以在预加载脚本（preload.js）中封装数据库操作方法，通过contextBridge暴露给渲染进程调用
• 找到项目中configs/webpack.config.base.js配置文件，在externals配置项中加入better-sqlite3，让Webpack打包时忽略该模块，运行时直接从Node原生模块加载：

// 示例配置
externals: ['better-sqlite3', ...原有其他外部依赖项]

• 给better-sqlite3做Electron适配重编译：在项目根目录执行以下命令即可

npm install -D electron-rebuild
npx electron-rebuild -f -w better-sqlite3

• 如果执行完以上步骤还是报错，可以在引入模块的位置打印检查导出内容：如果打印出来的对象有default属性，修改引入方式即可

// 把原来的引入改成这样
const Database = require('better-sqlite3').default

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