TypeError: fs.existsSync is not a function

前言

项目中采用create-react-app及electron进行框架搭建时，在没有使用electron时，一切都可以正常启动。
但是，当需要在页面中添加 import { dialog,ipcRenderer } from 'electron';时，开始报错。

错误内容
TypeError: fs.existsSync is not a function

image.png

错误原因
有种解释是，create-react-app使用的webpack会干扰标准模块的加载，导致了无法正常使用Node.js的模块。
但个人觉得更为合理的解释是，electron本身就是node服务端内容，而import默认是由webpack来处理，相当于是浏览器进程来尝试加载。浏览器进程不能调用服务进程的一些接口，如fs模块只能在服务端加载，这时候在浏览器进程加载electron就会报错。

解决方案

因为浏览器端无法加载electron，那么，我们可以使用preload预加载将需要的接口暴露出来。

1. 创建一个preload.js文件，放在入口文件main.js的同级目录下。

global.electron = require('electron');
window.ipcRenderer = require('electron').ipcRenderer;
window.remote = require('electron').remote;

2. 修改main.js文件
   在入口文件中添加preload配置项，将preload.js作为预加载文件。预加载的时候还是可以使用nodejs里的api

  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      preload: __dirname + '/preload.js'
    }
  });

3. 在组件中如下使用即可。

const electron = window.electron;
const remote = window.remote;
console.log(electron)
console.log(remote.dialog)

const {dialog} = window.remote;
dialog.showErrorBox('title', 'content');

参考文档:

https://github.com/electron/electron/issues/9920