I updated some npm packages in my Gatsby project and now I\'m seeing this warning in console:
React-hot-loader: react-
In short - React-Hot-Loader is something that "might not work". It has a lot of problems and limitations.
"hot-patch" was created to (first) support new React features, and (second) make it more stable.
It's the only our(ok, mine) hope to mitigate the major problems RHL has, and tracked as "version 5" - https://github.com/gaearon/react-hot-loader/milestone/3
hot-loader/react-dom
is not a "third party" lib - it's the same react-dom
with some patches applied to dev mode
only (you might check build scripts).
It just moves some dark magic, RHL uses to work, inside react, and actually removes it. RHL == black magic. RHL + patch == twice less magic.
in step 1, you should run it as follow:
npm i @hot-loader/react-dom@YOUR_REACT_VERSION
because gatsby uses react version ^16.12.0, and running the command above without specifying react version with install ^17.0.1 which is not compatible with the ^16.x version.
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.
Per my comment above, it's looking like react-hot-loader
wants the @hot-loader/react-dom
package instead of standard 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:
Update
You can disable the warning like so:
import { hot, setConfig } from 'react-hot-loader'
setConfig({
showReactDomPatchNotification: false
})
As of summer 2020, this is the current solution recommended on Gatsby's GitHub repository:
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
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.
So this appears to be an artifact of the development process. Looks like there was some back-and-forth on what to do in this case. The error message was commented out, and then later added back as a fix for an issue: https://github.com/gaearon/react-hot-loader/commit/efc3d6b5a58df77f6e0d5ca21bef54e8f8732070.
So, it looks like it's a minor warning, and you may be just fine unless you need specific features.
It might be a good idea to ask for clarity on this from the maintainers, since they seem slightly confused themselves :)