forge: Support webpack externals, modules listed as external should not be pruned during package

I have been digging through the packger code for hours and found a solution by adding a few hooks. Basically we need to find out which packages got marked as externals in webpack, and run npm install in the build path to fill up the node_modules folder in the package. Seems hacky but I think it works fine. The inspiration comes from the build steps of serverless-webpack package.

Sharing my forge config here:

const fs = require('fs-extra');
const path = require('path');
const { spawn } = require('child_process');

module.exports = {
  packagerConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'puppeteer_playground',
      },
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: [
        'darwin',
      ],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    [
      '@electron-forge/plugin-webpack',
      {
        mainConfig: './webpack.main.config.js',
        renderer: {
          config: './webpack.renderer.config.js',
          entryPoints: [
            {
              html: './src/renderer/index.html',
              js: './src/renderer/index.tsx',
              name: 'main_window',
            },
          ],
        },
      },
    ],
  ],
  hooks: {
    readPackageJson: async (forgeConfig, packageJson) => {
      // only copy deps if there isn't any
      if (Object.keys(packageJson.dependencies).length === 0) {
        const originalPackageJson = await fs.readJson(path.resolve(__dirname, 'package.json'));
        const webpackConfigJs = require('./webpack.renderer.config.js');
        Object.keys(webpackConfigJs.externals).forEach(package => {
          packageJson.dependencies[package] = originalPackageJson.dependencies[package];
        });
      }
      return packageJson;
    },
    packageAfterPrune: async (forgeConfig, buildPath) => {
      console.log(buildPath);
      return new Promise((resolve, reject) => {
        const npmInstall = spawn('npm', ['install'], {
          cwd: buildPath,
          stdio: 'inherit',
        });

        npmInstall.on('close', (code) => {
          if (code === 0) {
            resolve();
          } else {
            reject(new Error('process finished with error code ' + code));
          }
        });

        npmInstall.on('error', (error) => {
          reject(error);
        });
      });
    }
  }
};

I’m almost embarrassed to say what I did but I was at the end of my expertise. I started a new project with electron-edge-js-quick-start and copied my main electron process code to that project. Since the electron-forge webpack was working well (before packaging or making) I built the project with electron-forge and used the compiled index.js file in .webpack/renderer/main_window folder in my electron-edge-js-quick-start project and it ran and packaged well.
Of course you’ll have to manually move dependencies to your package.json and you may have to change Electron versions depending on your project. When I have time I’m going to dive deeper and see if maybe I can do something a bit cleaner. It works but it’s a messy solution.

Good prior art from @timfish https://github.com/electron-userland/electron-forge/issues/1276#issuecomment-863158445

https://www.npmjs.com/package/@timfish/forge-externals-plugin

I have been digging through the packger code for hours and found a solution by adding a few hooks. Basically we need to find out which packages got marked as externals in webpack, and run npm install in the build path to fill up the node_modules folder in the package. Seems hacky but I think it works fine. The inspiration comes from the build steps of serverless-webpack package.

Sharing my forge config here:

const fs = require('fs-extra');
const path = require('path');
const { spawn } = require('child_process');

module.exports = {
  packagerConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {
        name: 'puppeteer_playground',
      },
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: [
        'darwin',
      ],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    [
      '@electron-forge/plugin-webpack',
      {
        mainConfig: './webpack.main.config.js',
        renderer: {
          config: './webpack.renderer.config.js',
          entryPoints: [
            {
              html: './src/renderer/index.html',
              js: './src/renderer/index.tsx',
              name: 'main_window',
            },
          ],
        },
      },
    ],
  ],
  hooks: {
    readPackageJson: async (forgeConfig, packageJson) => {
      // only copy deps if there isn't any
      if (Object.keys(packageJson.dependencies).length === 0) {
        const originalPackageJson = await fs.readJson(path.resolve(__dirname, 'package.json'));
        const webpackConfigJs = require('./webpack.renderer.config.js');
        Object.keys(webpackConfigJs.externals).forEach(package => {
          packageJson.dependencies[package] = originalPackageJson.dependencies[package];
        });
      }
      return packageJson;
    },
    packageAfterPrune: async (forgeConfig, buildPath) => {
      console.log(buildPath);
      return new Promise((resolve, reject) => {
        const npmInstall = spawn('npm', ['install'], {
          cwd: buildPath,
          stdio: 'inherit',
        });

        npmInstall.on('close', (code) => {
          if (code === 0) {
            resolve();
          } else {
            reject(new Error('process finished with error code ' + code));
          }
        });

        npmInstall.on('error', (error) => {
          reject(error);
        });
      });
    }
  }
};

thank you for taking your time to post it here.

I’m getting an error when I try to make my app with that, I’m adding the hooks to webpack.main.config using electron-forge: 6.0.0-beta.63

the error:

An unhandled error has occurred inside Forge:
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

should I add the hooks somewhere else?