React-hot-loader: react-🔥-dom patch is not detected

Question

I updated some npm packages in my Gatsby project and now I'm seeing this warning in console:

React-hot-loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.

However, when I look into the source code, there is a comment:

// Actually everything works...

What does this warning actually mean? Is this something I should fix or just let it be?

Answer 1

Per my comment above, it's looking like react-hot-loader wants the @hot-loader/react-dom package instead of standard react-dom:

• https://github.com/gaearon/react-hot-loader#react--dom
• https://github.com/hot-loader/react-dom

Personally I'm a little concerned with swapping that out though since react-dom is a core part of any react-based application. Also it seems based on some of the linked issues and code comments that maybe this is just a short-term workaround to support new react features like hooks.

So I guess there's two options:

• Wait a little longer to see if they drop that requirement (and maybe run into a few edge cases for hot loading).
• Follow the instructions to get rid of the warning.

Update

You can disable the warning like so:

import { hot, setConfig } from 'react-hot-loader'

setConfig({
    showReactDomPatchNotification: false
})

Answer 2

You need to add @hot-loader/react-dom to your project based on your ReactJS version, pay attention below command:

yarn add @hot-loader/react-dom@[YOUR_REACT_VERSION]

Then it is needed to add resolve alias for it on your Webpack configuration file:

resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
}

For more information read its docs.