a suggestion for "require is not defind" about electron-typescript-react HOT 1 OPEN

I spent a day debugging the error require is not defined. I did not even use require in the renderer.

The culprit is @marshallofsound/webpack-asset-relocator-loader (or @versel/webpack-asset-relocator-loader or @timfish/webpack-asset-relocator-loader ) which adds support for locating node_modules in renderer. According to the current convention, renderer thread should not have access to native node modules. nodeIntegration: false is set by default. (also contextIsolation: true).

If you keep using ipcMain and ipcRenderer for communication, and don't require any modules in renderer, you will have to remove the loader. There error will persist even if you don't require any modules in renderer. This is because the loaders themselves include the __dirname (or require()) into your renderer.

We have two different solutions:

1. Keep using ipcMain and ipcRenderer for communication in the app, and edit the /webpack/rules.webpack.js and remove the following lines. And create a new rules.webpack.js file for main only, with this loader.

  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@marshallofsound/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },

2. Set nodeIntegration: true and contextIsolation: false. You can no longer use ipcMain and ipcRenderer. Doing this will also make the app less secure, as the renderer could be utilize to perform malicious operations on the computer.

from electron-typescript-react.