Hot Module Replacement (HMR) with React Create-React-App without ejecting for a fast development cycle

If you have a Create-React-App, follow this guide:

Firstly, install the dependencies: npm install --save-dev react-app-rewired react-hot-loader react-app-rewire-hot-loader @hot-loader/react-dom

In your root folder, create a file config-overrides.js

const rewireReactHotLoader = require('react-app-rewire-hot-loader')

/* config-overrides.js */
module.exports = function override(config, env) {
    config = rewireReactHotLoader(config, env)

    config.resolve.alias = {
        ...config.resolve.alias,
        'react-dom': '@hot-loader/react-dom'
    }

    return config
}

Then, in package.json, replace occurrences of react-scripts with react-app-rewired

In the component you are working on, do:

import { hot } from "react-hot-loader";

class App extends React.Component {
	// ... code ...
}

export default (hot)(module)(App)

Finally, make sure you have the latest react-scripts with npm update react-scripts

That's all that's required to have state-preserving hot module replacement working with a Create-React-App without ejecting.

Show Comments