Documentation for Webpack preload Scripts Is Not Correct

[dgildeh]

Pre-flight checklist

• [X] I have read the contribution documentation for this project.
• [X] I agree to follow the code of conduct that this project uses.
• [X] I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

7.4.0

Electron version

31.2.1

Operating system

macOS

Last known working Electron Forge version

6.1.1

Expected behavior

I just upgraded from Electron Forge 6.1.1 to the latest 7.4.0 and when I did the normal yarn start command the build would keep failing. From the error messages I narrowed it down to the preload configuration for my main renderer window:

renderer: {
        nodeIntegration: false,
        config: rendererConfig,
        entryPoints: [
          {
            name: 'main_window',
            html: '../frontend/src/index.html',
            js: '../frontend/src/index.tsx',
            preload: {
              js: './src/preload/preload.ts',
              config: preloadConfig,
            },
          },
          {
            name: 'background_window',
            html: './src/background/server-dev.html',
            js: './src/background/server.ts',
            nodeIntegration: true,
          },
        ],

In the V6 version, this configuration worked, however in this version the build fails with WebPack pollyfill errors and is targeting the browser, not node.js environment with all the node.js libraries available. I would expect this to pass as my preload is a bridge between the main process and renderer, and the docs don't say anything about this.

Actual behavior

After debugging the webpack plugin I found this line: https://github.com/electron/forge/blob/f77671d0cc3a829904526cf569b87716f0885552/packages/plugin/webpack/src/WebpackConfig.ts#L221

It turns out since Electron 20 all preload scripts are sandboxed by default (https://www.electronjs.org/docs/latest/tutorial/sandbox) but this isn't documented anywhere in the Electron Forge documentation, nor is how you get previously working preload scripts to work in v7 of Forge if you're coming from a previous version.

The solution is to add a seperate entry for the preload only with nodeIntegration: true set:

renderer: {
        nodeIntegration: false,
        config: rendererConfig,
        entryPoints: [
          {
            name: 'main_window',
            html: '../frontend/src/index.html',
            js: '../frontend/src/index.tsx',
          },
          {
            name: 'main_window_preload',
            nodeIntegration: true,
            preload: {
              js: './src/preload/preload.ts',
              config: preloadConfig,
            },
          },
          {
            name: 'background_window',
            html: './src/background/server-dev.html',
            js: './src/background/server.ts',
            nodeIntegration: true,
          },
        ],

and update your TypeScript variable to MAIN_WINDOW_PRELOAD_PRELOAD_WEBPACK_ENTRY:

  const mainWindow = new BrowserWindow({
    width,
    height,
    minWidth: MIN_WINDOW_WIDTH,
    minHeight: MIN_WINDOW_HEIGHT,
    icon: iconPath,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      // TODO - enable sandboxing once this issue fixed for webpack __dirname:
      // https://github.com/electron/forge/issues/2931
      sandbox: false,
      preload: MAIN_WINDOW_PRELOAD_PRELOAD_WEBPACK_ENTRY,
    },
  })

Please update the documentation accordingly so other users can easily figure out how to load preload scripts that require full node.js access.

Steps to reproduce

Use the renderer config above with a preload script that includes node.js modules.

Additional information

No response