TypeError: fs.existsSync is not a function

Referenced in the React project

const electron = require(‘electron’);

Replace with:

const electron = window.require(‘electron’);

Also need to add the webPreferences configuration:

const win = new BrowserWindow({
      width: 1000,
      height: 800,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true
      }
    })
Copy the code

Use examples:

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

class ReactNative extends React.Component {
    createOpenDialog = () => {
        remote.dialog.showOpenDialog({  
            properties: ['openFile', 'openDirectory']
        }).then(result => {  
            console.log(result.filePaths[0]);
        }).catch(err => {  
            console.log(err)
        })
    }
}

export default ReactNative;
Copy the code

preload.js

Unable to expose API, please check the latest documentation for Electron V13.

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
  desktop: true
})
Copy the code

packaging

Function createWindow () {// use win.loadurl (' file://${__dirname}/build/index.html '); RN debug start // win.loadurl ('http://localhost:3000/')}Copy the code

Package. json configuration, code files into the corresponding files, otherwise the package will not be included.

"build": {
    "appId": "xxx.xxx.xxx",
    "extends": null,
    "files": [
      "package.json",
      "main.js",
      "build/",
      "node_modules/",
      "src/"
    ],
    "mac": {
      "icon": "build/logo.png",
      "category": "public.app-category.developer-tools",
      "target": [
        "dmg"
      ]
    }
}
Copy the code

Let’s build React, then Electron

// 先执行
"build": "react-scripts build",

// 再执行
"build-electron": "electron-builder"

Copy the code

Example:

yarn build
yarn build-electron
Copy the code