React-helmet: Throws warnings in React 16.9 and will not work with React 17

[mikecousins]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Throws warnings with React 16.9+ and will not work with React 17.

If the current behavior is a bug,
please provide the steps to reproduce and if
possible a minimal demo of the problem.
Your bug will get fixed much faster if we can run your
code and it doesn't have dependencies other than React and react-helmet.
Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or
CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?
No warnings and should work.

Which versions of React and react-helmet, and which browser / OS are affected by this issue?
Did this work in previous versions of React and/or react-helmet?
React 16.9+, any version of react-helmet, any browser/os.

Here is the warning thrown now:

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)

[mikecousins]

Whoops, this is react-document-title, not react-helmet.

[mikecousins]

Still valid actually, react-helmet also depends on react-side-effect. Looks like we need to wait for them to update.

[AlmeroSteyn]

Ran into the same this morning with the package.

FYI this comment on the issue logged on react-side-effect: https://github.com/gaearon/react-side-effect/issues/54#issuecomment-520056590

Suggestion there is to migrate away from that package.

[danielweck]

Duplicate: https://github.com/nfl/react-helmet/issues/413

[bitttttten]

so TL;DR migrate to react-helmet-async?

[AlmeroSteyn]

Will this issue be fixed in this package? (Asking, not expecting. Great respect for all who maintain this.)

It's got quite a large usage base that it would be great if that would be possible instead of migration to another option.

[MarioRicalde]

Today I spent some time migrating some of my components that were depending on componentWillMount - turns out that my SEO component had a dependency on it without noticing.

[hiyangguo]

Still valid actually, react-helmet also depends on react-side-effect. Looks like we need to wait for them to update.

I force installed [email protected] in my package with

npm i  [email protected]

It works fine.
And when time will fix it?

[AlmeroSteyn]

From what I can see, the change in react-side-effect only silences the warning. It will still break in React 17.

[sudomaxime]

I am getting this error as well using react 16.9.0

[cdeutsch]

From what I can see, the change in react-side-effect only silences the warning. It will still break in React 17.

It looks like they renamed to the UNSAFE_ versions, which WILL continue to work in React 17

[sudomaxime]

I am getting this error as well using react 16.9.0

I ended-up using react-helmet-async instead, mainly for server side rendering purposes.

[eriklharper]

What's going on with this ticket? Do you plan on upgrading react-side-effect to 2.0, which addresses this issue? If you do that it will require you to upgrade to React 16, which you're going to want to do eventually anyway right?

Or, following Dan's advice to move away from using this might also be wise: https://github.com/gaearon/react-side-effect/issues/54#issuecomment-520056590

[AlmeroSteyn]

It looks like they renamed to the UNSAFE_ versions, which WILL continue to work in React 17

Yeah you are right, they are only removing the actual lifecycle hooks. However these lifecycle hooks have been deprecated due to possible problems with the upcoming concurrent mode, so this is not something one ideally wants to have "hidden" in applications that use this package.

Dan's advice in the linked comment would probably be the best way. Although it is a much costlier fix.

[asotog]

Installed today and getting same warning

[jonnypage-d3]

I also installed today and am getting the same warning

[ahmed-rezk-dev]

Me also!!!

[suhanw]

Me too

[cwelch5]

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. We'll also be looking to see how this library can work with React 17.

[koalex]

Still same problem on React 17...