Gatsby: Nested dependency calling soon to be deprecated componentWillMount method

[muuvmuuv]

Description

In my project I see this error after updating. I guess this will be fixed in the next release because react deprecated it?

Steps to reproduce

Use gatsby-starter-default

Expected result

...

Actual result

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(NullComponent) 

Environment

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 69.0
    Safari: 13.0
  npmPackages:
    gatsby: ^2.15.22 => 2.15.22 
    gatsby-image: ^2.2.21 => 2.2.21 
    gatsby-plugin-catch-links: ^2.1.10 => 2.1.10 
    gatsby-plugin-layout: ^1.1.8 => 1.1.8 
    gatsby-plugin-manifest: ^2.2.18 => 2.2.18 
    gatsby-plugin-purgecss: ^4.0.1 => 4.0.1 
    gatsby-plugin-react-helmet: ^3.1.8 => 3.1.8 
    gatsby-plugin-react-helmet-canonical-urls: ^1.2.0 => 1.2.0 
    gatsby-plugin-sass: ^2.1.15 => 2.1.15 
    gatsby-plugin-sharp: ^2.2.25 => 2.2.25 
    gatsby-plugin-sitemap: ^2.2.14 => 2.2.14 
    gatsby-remark-emoji: 0.0.3 => 0.0.3 
    gatsby-remark-images: ^3.1.23 => 3.1.23 
    gatsby-source-filesystem: ^2.1.26 => 2.1.26 
    gatsby-transformer-json: ^2.2.9 => 2.2.9 
    gatsby-transformer-remark: ^2.6.24 => 2.6.24 
    gatsby-transformer-sharp: ^2.2.17 => 2.2.17 
  npmGlobalPackages:
    gatsby-cli: 2.7.50

[lannonbr]

So digging around with this, it's a issue with a nested dependency. The current version of react-helmet we use for the SEO component has a dependency of react-side-effect. helmet is using v1 of that dep while v2 of the dep has come out and switched from componentWillMount to UNSAFE_componentWillMount. Helmet has yet to pull in this change.

For the upstream issue: https://github.com/nfl/react-helmet/issues/413

[ghost]

So digging around with this, it's a issue with a nested dependency. The current version of react-helmet we use for the SEO component has a dependency of react-side-effect. helmet is using v1 of that dep while v2 of the dep has come out and switched from componentWillMount to UNSAFE_componentWillMount. Helmet has yet to pull in this change.

For the upstream issue: nfl/react-helmet#413

Yes what @lannonbr said until the Helmet / SEO component can get fixed (ill take a look into this) the best to do for now is just in case run npx react-codemod rename-unsafe-lifecycles in the root of your projects dir to fix any that you may have set on any of your components and like mentioned ill look into this with the react-helmet to give you further help if need be

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[hafidzamr]

what conclusion for solve this problem ?

im already type

npx react-codemod rename-unsafe-lifecycles

but warning still showing

[bolonhadev]

what conclusion for solve this problem ?

im already type

npx react-codemod rename-unsafe-lifecycles

but warning still showing

Repost same question: 'what conclusion for solve this problem ?'

[iDVB]

Can we get an update on what the resolve is here.
The upstream issue https://github.com/nfl/react-helmet/issues/413 says to update react-side-effect but it seems react-helmet has not done so. Also there are a few people suggesting to use react-helmet-async instead.

Anyone have a resolve on this?

[bchehraz]

Updating react-side-effect did it for me.
1) I went into /node_modules/react-helmet inside my Gatsby project
2) Ran npm install --save [email protected] which uses UNSAFE_componentWillMount and now my warning is gone.

Obviously this isn't an ideal solution since deleting node_modules and reinstalling dependencies or creating a new Gatsby Starter will have the same react-helmet that comes with [email protected] and thus the warning will come back.

Update: Seems like somebody was working on a fix, but it failed in TravisCI: https://github.com/nfl/react-helmet/pull/472 ... So close, yet so far.

[Remzi1993]

Could we get an status update?
I'm worried.

[apolopena]

This is not a gatsby issue, rather it is a react-helmet issue. I worked
around it by swapping out react-helmet and gatsby-plugin-react helmet with
react-helmet-async and gatsby-plugin-react-helmet-async respectively.
Perhaps this change should be made in gatsby since react-helmet appears to
be no longer maintained?

On Wed, Nov 27, 2019, 7:37 AM Remzi Cavdar [e-mail] wrote:

Could we get an status update?
I'm worried.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/17865?email_source=notifications&email_token=AAXLHXSNIGSQ3BEIKPHAVRTQV2HZZA5CNFSM4I2JXW22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFJ4LYQ#issuecomment-559138274,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAXLHXX5O3HOYYHZMXRARH3QV2HZZANCNFSM4I2JXW2Q
.

[Remzi1993]

@apolopena I also think Gatsby needs to swap out for react helmet async > https://github.com/staylor/react-helmet-async

The original React Helmet is not actively maintained.

[seandearnaley]

I would also like a status update thanks

[tujoworker]

Yeah, as @Remzi1993 wrote, using the async version is the way to go.
Just use this Gatsby Plugin instead: gatsby-plugin-react-helmet-async together with react-helmet-async.

[wlwl2]

To fix this warning temporarily I did:

1. npm uninstall --save gatsby-plugin-react-helmet react-helmet
2. npm install --save gatsby-plugin-react-helmet-async react-helmet-async
3. In ./gatsby-config.js rename gatsby-plugin-react-helmet, to gatsby-plugin-react-helmet-async,
4. In ./src/components/seo.js change import Helmet from "react-helmet" to import { Helmet, HelmetProvider } from "react-helmet-async" then wrap the <Helmet htmlAttributes={{ ... /> inside <HelmetProvider></HelmetProvider> tags. (Not sure if this is the correct way of handling things).
   See https://github.com/staylor/react-helmet-async#usage (just don't include the <App></App> tags).
5. gatsby develop as normal.

This is basically a migration to gatsby-plugin-react-helmet-async following the suggestions above.

Other references:
https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet-async/
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-react-helmet

[seandearnaley]

Thanks @wlwl2 and @tujoworker those instructions worked great for me.

[wardpeet]

Hi, we don't use react-helmet internally in our packages, we could update our docs to resemble react-helmet-async instead. What do you think of that?

[tujoworker]

The -async package is a fork started two years ago. The original had its latest v5 release back in 2017 - but there is now an ongoing work to release v6 with future React support. Currently beta.2 is got released in jan 2020

Also, the API will be more like the -async version: https://github.com/nfl/react-helmet/wiki/Upgrade-from-5.x.x----6.x.x-beta

The main difference between them is the asynchronous possibilities server side.

Overall, difficult to get the right answer on your question, @wardpeet ☺️

[devboldly]

If you're using react-helmet version 5.x.x, try updating to 6.x.x

This fixed the issue for me. There is a breaking change with v6 -- you will need to change your Helmet imports to import { Helmet } from "react-helmet". See the upgrade notes for more info.

[lannonbr]

This is now partially resolved as react-helmet 6.0.0 is stable and gatsby-plugin-react-helmet 3.2.2 supports this new version of React Helmet.

That said, given the new version of React Helmet is a major update, Renovate won't update the default starter for this as it only updates minor and patch releases. Is anyone willing to push a PR to fix this and then close this issue?

[karlhorky]

@lannonbr opened a PR: #23059