react fast-refresh

[UberMouse]

Has anyone managed to get fast-refresh working with electron-webpack? I've just had a go setting it up with https://github.com/pmmmwh/react-refresh-webpack-plugin but haven't gotten it to actually apply a hot update.

I can tell the plugin is loaded since the error overlay works so something else is going on. It doesn't seem like there should be any problems making it work with with the renderer process based on how electron-webpack uses the Webpack Dev Server but ¯\_(ツ)_/¯

[FairyScript]

My solution:

deps: @pmmmwh/react-refresh-webpack-plugin,react-refresh

webpack.renderer.config.js:

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

module.exports = config => {
  const isDevelopment = process.env.NODE_ENV !== 'production';

  config.module.rules.unshift({
    test: /\.[jt]sx?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          plugins: [
            isDevelopment && [require.resolve('react-refresh/babel'), {
              skipEnvCheck: true,
            }],
          ].filter(Boolean)
        },
      },
    ],
  });
  config.plugins.push(...[
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ].filter(Boolean));

  return config;
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';

//fast refresh
if (module.hot) {
  module.hot.accept();
}

function App() {
  return <div>Hello World!</div>
}

ReactDOM.render(<App />, document.getElementById('app'));

---

Available demo

[justin-hackin]

I noticed my config already had a babel loader in it so I did this instead:

// eslint-disable-next-line import/no-extraneous-dependencies
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = (config) => {
  const isDevelopment = process.env.NODE_ENV !== 'production';

  if (isDevelopment) {
   // dirty
    const babelLoader = config.module.rules[0];
    if (!babelLoader) {
      throw new Error('could not find babel loader rule based on test is .js');
    }
    babelLoader.use.options.plugins.push([require.resolve('react-refresh/babel'), {
      skipEnvCheck: true,
    }]);
    config.plugins.push(new ReactRefreshWebpackPlugin());
  }
  return config;
};

I tried to add fork-ts-checker-webpack-plugin too as has been suggested but it looks like electron-webpack already does this internally

[dkadrios]

Thanks @FairyScript! Was pulling my hair out trying to get fast refresh to work and this did the trick!