React Fast Refresh with webpack plugin & react-refresh-webpack-plugin

Preflight Checklist

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

Issue Details

Disclaimer: I’m a relative JS noob and have started a PDF form filler app that I recently ported to electron-forge 6.0.0-beta52 with webpack plugin (no TS). My understanding is that the most recent beta53 release didn’t change anything relevant in this regard.

I want to use React in my renderer. The current version of the electron-forge webpack plugin’s package.json refers to webpack-hot-middleware, whose own README.md mentions react-transform-hmr and react-hot-loader as “some common options”. Both appear obsolete because React introduced a new HMR system called Fast Refresh, which requires a different kind of integration. According to guidance by react-hot-loader, react-refresh-webpack-plugin is currently the way to go for integration of React Fast Refresh in a webpack setting. So I added that to my dependencies and get react-refresh-webpack-plugin v0.3.3 installed. My webpack.config.js and webpack.rules.js integrate it as recommended in the react-refresh-webpack-plugin README. Surprisingly, it appears to work at least a little during development (i.e. yarn start).

What doesn’t work is when I invoke yarn make. Any version apparently as it doesn’t make it past compilation (unlike yarn start, which must be running some other kind of compilation). I’ll stick to the portable maker-zip plugin for reproduction.

Expected Behavior

yarn make --targets @electron-forge/maker-zip creates a redistributable .zip file.

Actual Behavior

yarn make --targets @electron-forge/maker-zip breaks in this way:

yarn run v1.22.4
$ electron-forge make --targets @electron-forge/maker-zip
✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Compiling Main Process Code
✖ Compiling Renderer Template

An unhandled error has occurred inside Forge:
Hot Module Replacement (HMR) is not enabled! React-refresh requires HMR to function properly.
Error: Hot Module Replacement (HMR) is not enabled! React-refresh requires HMR to function properly.
    at /path/to/formstamper/node_modules/@pmmmwh/react-refresh-webpack-plugin/src/index.js:83:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/path/to/formstamper/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at AsyncSeriesHook.lazyCompileHook (/path/to/formstamper/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.run (/path/to/formstamper/node_modules/webpack/lib/Compiler.js:312:24)
    at /path/to/formstamper/node_modules/@electron-forge/plugin-webpack/src/WebpackPlugin.ts:109:8
    at new Promise (<anonymous>)
    at WebpackPlugin.runWebpack (/path/to/formstamper/node_modules/@electron-forge/plugin-webpack/src/WebpackPlugin.ts:107:102)
    at /path/to/formstamper/node_modules/@electron-forge/plugin-webpack/src/WebpackPlugin.ts:266:32
error Command failed with exit code 1.

This strikes me as weird because, following the instructions, I don’t see why it would even try to do anything with HMR unless I explicitly add it to plugins in the webpack config files. And if yarn make presumably uses production mode in some way, shouldn’t it end up without react-refresh-webpack-plugin in the config altogether?

As a relative JS noob, it’s possible that I’m screwing up something here. Or does the electron-forge webpack plugin have a hand in there somehow? I find this whole piecemeal construction of barely-finished NPM packages rather fragile, it’s hard to tell where the error originates. Feel free to close this issue if you believe this is user error on my end. Otherwise it would be great to have some guidance (ideally as part of the repo) about how to correctly set up React Fast Refresh with @electron-forge/plugin-webpack.

Thank you for trying to help or at least for reading this far down in the issue!

To Reproduce

• Clone formstamper @ commit b3299dee
• yarn install
• yarn make --targets @electron-forge/maker-zip

Additional Information

Related mini request: react-refresh-webpack-plugin is now on their v0.4 release series, which is apparently a major rework and uses webpack’s module.hot.invalidate API for a better experience overall. But I can’t install it because it depends on webpack v4.43.0 or higher, whereas the electron-forge webpack plugin requires v4.42.0 and thus prevents an update of react-refresh-webpack-plugin. I don’t know what’s involved in updating webpack but it sounds like this would provide value for this kind of setup.

[ivancuric]

Sure. This setup works as long as there isn’t a preloader entry in forge config, even with babel-loader disabled.

webpack.plugins.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = [
  new ForkTsCheckerWebpackPlugin(),
  isDevelopment &&
    new ReactRefreshWebpackPlugin({
      overlay: {
        sockIntegration: 'whm',
      },
    }),
].filter(Boolean);

webpack.rules.js

// const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = [
  // Add support for native node modules
  // Disabled due to the following issue
  // https://github.com/electron-userland/electron-forge/issues/1688
  // {
  //  test: /\.node$/,
  //  use: 'node-loader',
  // },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@marshallofsound/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: [
      // Disabled due to the following issue
      // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/263
      // isDevelopment && {
      //   loader: 'babel-loader',
      //   options: { plugins: ['react-refresh/babel'] },
      // },
      {
        loader: 'ts-loader',
        options: { transpileOnly: true },
      },
    ].filter(Boolean),
  },
];

webpack.main.config.js

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: './src/index.ts',
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
  },
};

webpack.renderer.config.js

const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');

rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});

module.exports = {
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
  },
};

Adding a preload script results in the following error:

An unhandled exception has occurred inside Forge:
[React Refresh] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
Error: [React Refresh] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
    at createError (D:\dev\demo-app\node_modules\@pmmmwh\react-refresh-webpack-plugin\lib\utils\createError.js:7:10)
    at D:\dev\demo-app\node_modules\@pmmmwh\react-refresh-webpack-plugin\lib\index.js:219:25   
    at SyncHook.eval (eval at create (D:\dev\demo-app\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:11:1)
    at SyncHook.lazyCompileHook (D:\dev\demo-app\node_modules\tapable\lib\Hook.js:154:20)      
    at NormalModule.createLoaderContext (D:\dev\demo-app\node_modules\webpack\lib\NormalModule.js:236:40)
    at NormalModule.doBuild (D:\dev\demo-app\node_modules\webpack\lib\NormalModule.js:288:30)  
    at NormalModule.build (D:\dev\demo-app\node_modules\webpack\lib\NormalModule.js:446:15)    
    at Compilation.buildModule (D:\dev\demo-app\node_modules\webpack\lib\Compilation.js:739:10)    at D:\dev\demo-app\node_modules\webpack\lib\Compilation.js:981:14
    at D:\dev\demo-app\node_modules\webpack\lib\NormalModuleFactory.js:409:6
    at D:\dev\demo-app\node_modules\webpack\lib\NormalModuleFactory.js:155:13
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (D:\dev\demo-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:18:1)
    at AsyncSeriesWaterfallHook.lazyCompileHook (D:\dev\demo-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\dev\demo-app\node_modules\webpack\lib\NormalModuleFactory.js:138:29
    at D:\dev\demo-app\node_modules\webpack\lib\NormalModuleFactory.js:346:9
    at processTicksAndRejections (node:internal/process/task_queues:75:11)

[MarshallOfSound]

Closed by #2679