react-helmet: Incompatible with StrictMode
When use inside <StrictMode> I got this error
Warning: Unsafe lifecycle methods were found within a strict-mode tree:
componentWillMount: Please update the following components to use componentDidMount instead: SideEffect(NullComponent)
Here is reproducible example https://github.com/stereobooster/react-lingui-example/pull/3/files
<ConcurrentMode><App /></ConcurrentMode> forces StrictMode check.
Related https://github.com/gaearon/react-side-effect/issues/40
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 66
- Comments: 49 (4 by maintainers)
Commits related to this issue
- Replace helmet with async version https://github.com/nfl/react-helmet/issues/426 — committed to Grzesie2k/react-saga-init by Grzesie2k 5 years ago
- chore: react-helmet => react-helmet-async fix SideEffect(NullComponent) warning https://github.com/readium/readium-desktop/issues/596 https://github.com/nfl/react-helmet/issues/465 https://github.co... — committed to ant-design/ant-design by afc163 5 years ago
- chore: react-helmet => react-helmet-async fix SideEffect(NullComponent) warning https://github.com/readium/readium-desktop/issues/596 https://github.com/nfl/react-helmet/issues/465 https://github.co... — committed to ant-design/ant-design by afc163 5 years ago
- Replace `react-helmet` with `react-helmet-async` To resolve https://github.com/nfl/react-helmet/issues/426 and remove warning in console due to that issue. — committed to bobwhitelock/todotxt-ui by bobwhitelock 3 years ago
- Remplace react-helmet par react-helmet-async Motivation : https://github.com/nfl/react-helmet/issues/426#issuecomment-690925576 Popularité relative : https://www.npmtrends.com/react-helmet-vs-react-h... — committed to betagouv/mon-entreprise by mquandalle 3 years ago
- Remplace react-helmet par react-helmet-async Motivation : https://github.com/nfl/react-helmet/issues/426#issuecomment-690925576 Popularité relative : https://www.npmtrends.com/react-helmet-vs-react-h... — committed to betagouv/mon-entreprise by mquandalle 3 years ago
- Remplace react-helmet par react-helmet-async Motivation : https://github.com/nfl/react-helmet/issues/426#issuecomment-690925576 Popularité relative : https://www.npmtrends.com/react-helmet-vs-react-h... — committed to betagouv/mon-entreprise by mquandalle 3 years ago
- Remplace react-helmet par react-helmet-async Motivation : https://github.com/nfl/react-helmet/issues/426#issuecomment-690925576 Popularité relative : https://www.npmtrends.com/react-helmet-vs-react-h... — committed to betagouv/mon-entreprise by mquandalle 3 years ago
- Remplace react-helmet par react-helmet-async Motivation : https://github.com/nfl/react-helmet/issues/426#issuecomment-690925576 Popularité relative : https://www.npmtrends.com/react-helmet-vs-react-h... — committed to publicodes/publicodes by mquandalle 3 years ago
This is now happening in non-StrictMode as well with React v16.9.
Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
npx react-codemod rename-unsafe-lifecyclesin your project source folder.Please update the following components: SideEffect(DocumentTitle)
Hi all, so what is the status, will this be fixed soon or should we look for a workaround? The issue is 1 year old though. Thanks.
There is no “issue” to fix until React 18 or so is released (whenever the
UNSAFE_methods are removed). And that’s the problem of the dependency, not this repo.I have this issue in Gatsby.js projects, cos it depends on your package under-the-hood, and I can’t use react-helmet-async
Same issue here. Running only 6.0.0 as well
You can get rid of the warning by forcing
react-helmetto usereact-side-effect 2.1.0.Add this in your
package.json:ref: https://yarnpkg.com/lang/en/docs/selective-version-resolutions/
I’m using
6.1.0and still getting this issue@JustFly1984 though this is somewhat off-topic I think we should clear some things up here.
First of all, you seem to be ignoring the fact that you were wrong and that I was just correcting your attempt to correct me.
Second of all, I’m on this thread for the same reason you are, I was looking for a solution to an obvious thing that should be solved, but your spreading misinformation about when it will be an “issue” and what the issue actually is.
Third of all, the only “unsafe” part of using these methods is that the React developers have decided to deprecate them - I believe because they had the potential for misuse - and that, because they are deprecated now, they won’t be around forever There isn’t anything more dangerous about using them now vs a year ago except the knowledge that they won’t be around forever.
I haven’t once suggested the methods shouldn’t be replaced so you can stop trying to argue with someone who isn’t opposing your opinion.
Thanks for everyone’s patience. We are actively working on 6.0.0 release. 6.0.0-beta.2 is available and will work with the latest React version.
I solved my issue by using
react-helmet-async(I guess it uses Context). Issue can be closed.+1, would love to get rid of these warnings on my project if possible
This issue should be re-opened. On the latest version of React
16.13.1, on both versions of Node12.17(LTS) and14.3, and yarn1.22.4there is still this warning.It is no difference in using
6.0.0or6.0.0.-beta.2version of the package.There is no difference in removing
node_modulesnoryarn.lock, it won’t fix the problem:Using
npmversion6.13.4instead ofyarnalso makes no difference.Hey @tmbtech ,
as upgrading to “react-side-effect”: “2.1.0” would obviously solve the issue, is this something you would be willing to do?
If anyone is just now finding this issue,
react-helmet-asyncis the most straightforward alternative. It now receives 400,000 more weekly downloads thanreact-helmet.Unfortunately, it doesn’t appear that
react-helmetis being actively maintained as there hasn’t been a commit in 3 months.I only have 6.0.0 installed, but I am still seeing this warning.
I hope they will reopen the issue. it’s still happening.
@ekilah What in word UNSAFE doesn’t worry you at all?
@vjs3 I hope someone from the maintainers (@tmbtech @cwelch5) look into it!
@ekilah React 17, not 18). Untill this dependency is dependency of this repo, it is a problem for this repo. For me personally this is an issue, cos react-helmet is dependency of gatsby.js, exactly - gatsby-plugin-react-helmet
They already consider to switch to react-helmet-async, which already has same amount of weekly installs as react-helmet, but it will be a breaking change for gatsby.js
Same issue over here!
I only have 6.0.0 as well, and still have this warning
6.0.0-beta.2 is working for me with no errors, nice one 👍
Maybe it’s because I’m using yarn workspaces, it didn’t work for me.
https://github.com/staylor/react-helmet-async
@mobeigi it is not tracked in an open issue
Oh looks like
6.0.0just dropped (c17725a078676f877c55ba5b043b68c2f0488baf), thanks @cwelch5 !For anyone upgrading, remember to use
instead of
so is there any solution to this? can someone just release another beta-6.X.X release so that we can get rid of this warning?
@rifaidev any updates when your fix could get released?
+1, and React version 16.13.1
This didn’t work for me either.
running yarn install shows the following warning:
Resolution field “react-side-effect@2.1.0” is incompatible with requested version “react-side-effect@^1.1.0”
yeah, I’ve the same problem… 😭
Node v14.2, yarn 1.22. By the
yarn.lockisreact-side-effect@^2.1.0Maybe try searching your yarn.lock or package-lock.json file for older versions of react-side-effect? That should help you determine which package is requiring it. But it shouldn’t be react-helmet if you only have 6.0.0.
@cwelch5 Maybe this issue shouldn’t be closed until there is a non-beta version of
6.0.0released?Do you have a timeline for the final
6.0.0?I have the same warning but adding resolution field with react-side-effect 2.1.0 did remove the componentWillMount warning for me
@NNSTH I switched over to it with no issues, almost a drop-in replacement, just a couple changes required, their README covered it. I don’t use any of the SSR/‘async’ stuff there, just what this repo provided.
I just upgraded to v 6.0.0, and I’m still seeing
Someone said this was fixed in 6.0.0-beta.2. Am I doing something wrong, or is it still not fixed?
@ekilah thanks for quick response, I’ll give it a try.
Thank you for posting. We are aware and will look into upgrading. Though to be honest, I haven’t looked into it enough to full understand how we are going to fix it without removing react-side-effect.