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
})

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.

Update 2020

As of summer 2020, this is the current solution recommended on Gatsby's GitHub repository:

Step 1

Run this command - But running this alone won't fix the issue:

npm install -D @hot-loader/react-dom
// or
yarn add -D @hot-loader/react-dom

Step 2

Modify gatsby-node.js to add the following:

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

Restart gatsby develop. The warning is gone.