Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Throws warnings in React 16.9 and will not work with React 17 #465

Open
mikecousins opened this issue Aug 9, 2019 · 14 comments

Comments

@mikecousins
Copy link

commented Aug 9, 2019

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 mikecousins closed this Aug 9, 2019
@mikecousins

This comment has been minimized.

Copy link
Author

commented Aug 9, 2019

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

@mikecousins mikecousins reopened this Aug 9, 2019
@mikecousins

This comment has been minimized.

Copy link
Author

commented Aug 9, 2019

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

@AlmeroSteyn

This comment has been minimized.

Copy link

commented Aug 12, 2019

Ran into the same this morning with the package.

FYI this comment on the issue logged on react-side-effect: gaearon/react-side-effect#54 (comment)

Suggestion there is to migrate away from that package.

@danielweck

This comment has been minimized.

Copy link

commented Aug 16, 2019

Duplicate: #413

@bitttttten

This comment has been minimized.

Copy link

commented Aug 19, 2019

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

@AlmeroSteyn

This comment has been minimized.

Copy link

commented Aug 19, 2019

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

This comment has been minimized.

Copy link

commented Aug 25, 2019

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

This comment has been minimized.

Copy link

commented Sep 20, 2019

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

I force installed react-side-effect@2.1.0 in my package with

npm i  react-side-effect@2.1.0

It works fine.
And when time will fix it?

@AlmeroSteyn

This comment has been minimized.

Copy link

commented Sep 20, 2019

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

@sudomaxime

This comment has been minimized.

Copy link

commented Sep 24, 2019

I am getting this error as well using react 16.9.0

@cdeutsch

This comment has been minimized.

Copy link

commented Sep 24, 2019

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

This comment has been minimized.

Copy link

commented Sep 24, 2019

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

This comment has been minimized.

Copy link

commented Sep 24, 2019

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: gaearon/react-side-effect#54 (comment)

@AlmeroSteyn

This comment has been minimized.

Copy link

commented Sep 25, 2019

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.

wlach added a commit to wlach/iodide that referenced this issue Sep 30, 2019
Fixes a console error by implicitly removing the dependency on react-side-effect
(see nfl/react-helmet#465).
@wlach wlach referenced this issue Sep 30, 2019
1 of 1 task complete
wlach added a commit to iodide-project/iodide that referenced this issue Sep 30, 2019
Fixes a console error by implicitly removing the dependency on react-side-effect
(see nfl/react-helmet#465).
ZauberNerd added a commit to untool/untool that referenced this issue Oct 15, 2019
The https://github.com/nfl/react-helmet repository seems fairly dead,
there are a lot of open issues and PRs and not many releases / commits
recently.
Also the author of the underlying `react-side-effect` library
discourages its usage: gaearon/react-side-effect#54 (comment)

The npm numbers verify, that react-helmet-async now has more downloads
than react-helmet:
- https://www.npmjs.com/package/react-helmet
- https://www.npmjs.com/package/react-helmet-async

Read more:
- nfl/react-helmet#465
- gaearon/react-side-effect#40
ZauberNerd added a commit to untool/untool that referenced this issue Oct 15, 2019
The https://github.com/nfl/react-helmet repository seems fairly dead,
there are a lot of open issues and PRs and not many releases / commits
recently.
Also the author of the underlying `react-side-effect` library
discourages its usage: gaearon/react-side-effect#54 (comment)

The npm numbers verify, that react-helmet-async now has more downloads
than react-helmet:
- https://www.npmjs.com/package/react-helmet
- https://www.npmjs.com/package/react-helmet-async

Read more:
- nfl/react-helmet#465
- gaearon/react-side-effect#40

BREAKING CHANGE: Replace `react-helmet` with `react-helmet-async`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.