🔥 fixing react-hot-loader in gatsby

Have you ever cloned a fresh copy of Gatsby, installed the dependencies, and booted up the development server only to be greeted by this ugly warning in your console?

Well I have. Enough times to drive me to actually address the issue. The problem lies with react-hot-loader, the package Gatsby uses for hot reloading react components. The warning is telling us that the version of @hot-loader/react-dom is not compatible with the installed version of react.

To fix this, first install the latest version of @hot-loader/react-dom.

npm install --save-dev @hot-loader/react-dom

Then modify the webpack configuration in the gatsby-node.js file. The following code tells Gatsby to use the hot version of react-dom only while running in development.

const onCreateWebpackConfig = ({stage, actions}) => {
    if (stage.startsWith("develop")) {
        actions.setWebpackConfig({
            resolve: {
                alias: {"react-dom": "@hot-loader/react-dom"},
            },
        })
    }
}

And that's it, no more annoying error message! Hopefully one day Gatsby will adopt react-refresh, eliminate this warning message, and give us stateful component reloading too!