webpack-fast-refresh

React Fast Refresh for webpack@5+ and babel@7.9+

$3

This repository is to be considered _EXPERIMENTAL_. For most use cases we recommend using the officially endorsed webpack plugin available at pmmmwh/react-refresh-webpack-plugin.

Usage

1. Install both react-refresh and webpack-fast-refresh

``bash
npm install -D -E @webhotelier/webpack-fast-refresh react-refresh


or


yarn add -D -E @webhotelier/webpack-fast-refresh react-refresh
`

2. Configure webpack

Make the following changes to your webpack.config.js:

$3

`js
const ReactRefreshPlugin = require('@webhotelier/webpack-fast-refresh');

config.plugins.unshift(new ReactRefreshPlugin());

// or if you have an object-based config:
{
...otherSettings,
plugins: [new ReactRefreshPlugin(), ...otherplugins];
}
`

$3

Depending on how you have configured your entry, change it similarly to the following examples:

`diff
- config.entry = './index.js'; // or
- config.entry = ['./index.js'];
+ config.entry = ['@webhotelier/webpack-fast-refresh/runtime.js', './index.js'];

- config.entry = {
- import: './index.js', // or
- import: ['./index.js'],
- };
+ config.entry = {
+ import: ['@webhotelier/webpack-fast-refresh/runtime.js', './index.js'],
+ };

- config.main.entry = './index.js'; // or
- config.main.entry = ['./index.js'];
+ config.main.entry = [
+ '@webhotelier/webpack-fast-refresh/runtime.js',
+ './index.js',
+ ];

{
"entry": {
- "main": "./index.js" // or
- "main": ["./index.js"]
+ "main": ["@webhotelier/webpack-fast-refresh/runtime.js", "./index.js"]
}
}
`

$3

`diff
{
"module": {
"rules": [
{
"test": /\.jsx$/,
"use": [
{ "loader": "babel-loader", "options": { "cacheDirectory": true } },
+ { "loader": "@webhotelier/webpack-fast-refresh/loader.js" }
]
}
]
}
}
`

or push it with code:

`js
// make sure to use the index of your JSX loader, 0 in this example
config.module.rules[0].use.push('@webhotelier/webpack-fast-refresh/loader.js');
`

3. Configure babel

Add react-refresh/babel to your babelrc:

`diff
{
"presets": [["@babel/preset-react", { "runtime": "automatic" }]],
+ "plugins": ["react-refresh/babel"]
}
`

4. Configure error-overlay plugin (optional)

`js
const ErrorOverlayPlugin = require('@webhotelier/webpack-fast-refresh/error-overlay');
config.plugins.push(new ErrorOverlayPlugin());

// or if you have an object-based config:
{
...otherSettings,
plugins: [new ErrorOverlayPlugin(), ...otherplugins];
}
`

5. Launch the server

Make sure you have HMR enabled.

$3

`bash
webpack-dev-server --hot --mode development
`

$3

In webpack.config.js:

`javascript
config.entry.main.unshift(require.resolve('webpack-hot-middleware/client'));
config.plugins.push(new webpack.HotModuleReplacementPlugin());
`

In your node server:

`javascript
if (app.get('env') === 'development') {
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.json');
const webpackCompiler = webpack(webpackConfig);

app.use(
require('webpack-dev-middleware')(webpackCompiler, {
lazy: false,
publicPath: webpackConfig.output.publicPath,
headers: { 'Access-Control-Allow-Origin': '*' },
})
);

app.use(
require('webpack-hot-middleware')(webpackCompiler, {
path: '/__webpack_hmr',
heartbeat: 10 * 1000,
noInfo: false,
quiet: false,
})
);
}
`

Common Issues

html-webpack-plugin

This plugin is not compatible with html-webpack-plugin` at the moment.

Production problems

The above plugin & loader DO NOT check if they are running in production builds and do not automatically disable themselves. Make sure you add the correct checks to only include them in development builds.

References

- @next/react-refresh-utils
- @pmmmwh/react-refresh-webpack-plugin
- Implementation by @maisano