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

Most upvoted comments

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.

  • Move code with side effects to componentDidMount, and set initial state in the constructor.
  • Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in 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-helmet to use react-side-effect 2.1.0.

Add this in your package.json:

"resolutions": {
	"react-helmet/react-side-effect": "2.1.0"
}

ref: https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

I’m using 6.1.0 and 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 Node 12.17 (LTS) and 14.3, and yarn 1.22.4 there is still this warning.

It is no difference in using 6.0.0 or 6.0.0.-beta.2 version of the package.

There is no difference in removing node_modules nor yarn.lock, it won’t fix the problem:

rm -rf node_modules
rm -rf yarn.lock
yarn

Using npm version 6.13.4 instead of yarn also 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-async is the most straightforward alternative. It now receives 400,000 more weekly downloads than react-helmet.

Unfortunately, it doesn’t appear that react-helmet is being actively maintained as there hasn’t been a commit in 3 months.

you should try to see if you have multiple versions installed

npm ls react-helmet
## OR
yarn why react-helmet

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!

you should try to see if you have multiple versions installed

npm ls react-helmet
## OR
yarn why react-helmet

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 👍

You can get rid of the warning by forcing react-helmet to use react-side-effect 2.1.0.

Add this in your package.json:

"resolutions": {
	"react-helmet/react-side-effect": "2.1.0"
}

ref: https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

Maybe it’s because I’m using yarn workspaces, it didn’t work for me.

Does anyone have an alternative to Helmet they can recommend? I don’t want to install a peer dependency just to get rid of this warning.

https://github.com/staylor/react-helmet-async

Screen Shot 2019-12-11 at 09 47 26

@mobeigi it is not tracked in an open issue

Oh looks like 6.0.0 just dropped (c17725a078676f877c55ba5b043b68c2f0488baf), thanks @cwelch5 !

For anyone upgrading, remember to use

import { Helmet } from "react-helmet"

instead of

import Helmet from "react-helmet"

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?

Same issue here. Running only 6.0.0 as well

+1, and React version 16.13.1

You can get rid of the warning by forcing react-helmet to use react-side-effect 2.1.0.

Add this in your package.json:

"resolutions": {
	"react-helmet/react-side-effect": "2.1.0"
}

ref: https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

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”

Same issue here. Running only 6.0.0 as well

+1, and React version 16.13.1

yeah, I’ve the same problem… 😭

Node v14.2, yarn 1.22. By the yarn.lock is react-side-effect@^2.1.0

Maybe 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.0 released?

Do you have a timeline for the final 6.0.0?

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”

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

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: SideEffect(NullComponent)

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.