Nested dependency calling soon to be deprecated componentWillMount method #17865

muuvmuuv · 2019-09-25T08:53:03Z

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

The text was updated successfully, but these errors were encountered:

lannonbr · 2019-09-25T12:45:43Z

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

ghost · 2019-09-26T18:22:20Z

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 · 2019-10-21T17:27:34Z

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! 💪💜

d-strygwyr · 2019-10-27T06:02:42Z

what conclusion for solve this problem ?

im already type

npx react-codemod rename-unsafe-lifecycles

but warning still showing

miltonbolonha · 2019-11-06T01:54:45Z

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 · 2019-11-08T15:12:30Z

Can we get an update on what the resolve is here.
The upstream issue nfl/react-helmet#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 · 2019-11-26T23:07:39Z

Updating react-side-effect did it for me.

I went into /node_modules/react-helmet inside my Gatsby project
Ran npm install --save react-side-effect@2.0.0 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 react-side-effect@1.1.0 and thus the warning will come back.

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

Remzi1993 · 2019-11-27T15:36:44Z

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

apolopena · 2019-11-27T15:45:15Z

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 ***@***.***> 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 <#17865?email_source=notifications&email_token=AAXLHXSNIGSQ3BEIKPHAVRTQV2HZZA5CNFSM4I2JXW22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFJ4LYQ#issuecomment-559138274>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAXLHXX5O3HOYYHZMXRARH3QV2HZZANCNFSM4I2JXW2Q> .

Remzi1993 · 2019-12-01T23:39:50Z

@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 · 2020-01-27T17:23:07Z

I would also like a status update thanks

tujoworker · 2020-02-12T20:25:43Z

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 · 2020-02-13T05:44:41Z

To fix this warning temporarily I did:

npm uninstall --save gatsby-plugin-react-helmet react-helmet
npm install --save gatsby-plugin-react-helmet-async react-helmet-async
In ./gatsby-config.js rename gatsby-plugin-react-helmet, to gatsby-plugin-react-helmet-async,
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).
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 · 2020-02-13T06:36:17Z

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

wardpeet · 2020-02-13T07:05:59Z

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 · 2020-02-13T07:47:16Z

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 ☺️

ghost · 2020-03-13T22:18:52Z

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.

We've made a upgrade to react-helmet 6 beta More context: gatsbyjs/gatsby#17865 (comment)

lannonbr · 2020-04-13T12:54:07Z

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 · 2020-04-13T14:37:16Z

@lannonbr opened a PR: #23059

v5 caused our tests to warn about deprecated componentWillMount method. see gatsbyjs/gatsby#17865

https://github.com/gatsbyjs/gatsby/issues/17865\#issuecomment-612886060

lannonbr added the type: upstream Issues outside of Gatsby's control, caused by dependencies label Sep 25, 2019

lannonbr changed the title ~~Warning: componentWillMount has been renamed, and is not recommended for use.~~ Nested dependency calling soon to be deprecated componentWillMount method Sep 25, 2019

ghost added status: WIP type: maintenance An issue or pull request describing a change that isn't a bug, feature or documentation change labels Sep 26, 2019

lannonbr mentioned this issue Sep 30, 2019

Warning: componentWillUpdate when using themes #17994

Closed

lannonbr removed the status: WIP label Sep 30, 2019

gatsbot bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Oct 21, 2019

LekoArts added not stale and removed stale? Issue that may be closed soon due to the original author not responding any more. labels Oct 25, 2019

jimmyandrade pushed a commit to multei/web that referenced this issue Mar 14, 2020

fix(seo.js): avoid componentWillMount warning

031e0aa

We've made a upgrade to react-helmet 6 beta More context: gatsbyjs/gatsby#17865 (comment)

lannonbr removed the type: upstream Issues outside of Gatsby's control, caused by dependencies label Apr 13, 2020

karlhorky mentioned this issue Apr 13, 2020

fix(starters): Upgrade react-helmet in default starter #23059

Merged

gatsbybot closed this as completed in #23059 Apr 16, 2020

LekoArts removed the not stale label May 26, 2020

zevdg added a commit to magic-makers/vanessaquirk.com that referenced this issue Jul 6, 2020

upgrade helmet

f63903b

v5 caused our tests to warn about deprecated componentWillMount method. see gatsbyjs/gatsby#17865

zevdg mentioned this issue Jul 6, 2020

upgrade helmet magic-makers/vanessaquirk.com#28

Merged

j127 referenced this issue in j127/gatsby-starter-website-blog Mar 22, 2021

Update some packages to fix a bug.

023d8d4

https://github.com/gatsbyjs/gatsby/issues/17865\#issuecomment-612886060

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nested dependency calling soon to be deprecated componentWillMount method #17865

Nested dependency calling soon to be deprecated componentWillMount method #17865

muuvmuuv commented Sep 25, 2019

lannonbr commented Sep 25, 2019

ghost commented Sep 26, 2019 •

edited by ghost

Loading

gatsbot bot commented Oct 21, 2019

d-strygwyr commented Oct 27, 2019 •

edited

Loading

miltonbolonha commented Nov 6, 2019

iDVB commented Nov 8, 2019

bchehraz commented Nov 26, 2019 •

edited

Loading

Remzi1993 commented Nov 27, 2019

apolopena commented Nov 27, 2019 via email

Remzi1993 commented Dec 1, 2019

seandearnaley commented Jan 27, 2020

tujoworker commented Feb 12, 2020

wlwl2 commented Feb 13, 2020 •

edited

Loading

seandearnaley commented Feb 13, 2020

wardpeet commented Feb 13, 2020

tujoworker commented Feb 13, 2020

ghost commented Mar 13, 2020 •

edited by ghost

Loading

lannonbr commented Apr 13, 2020

karlhorky commented Apr 13, 2020 •

edited

Loading

Nested dependency calling soon to be deprecated componentWillMount method #17865

Nested dependency calling soon to be deprecated componentWillMount method #17865

Comments

muuvmuuv commented Sep 25, 2019

Description

Steps to reproduce

Expected result

Actual result

Environment

lannonbr commented Sep 25, 2019

ghost commented Sep 26, 2019 • edited by ghost Loading

gatsbot bot commented Oct 21, 2019

d-strygwyr commented Oct 27, 2019 • edited Loading

miltonbolonha commented Nov 6, 2019

iDVB commented Nov 8, 2019

bchehraz commented Nov 26, 2019 • edited Loading

Remzi1993 commented Nov 27, 2019

apolopena commented Nov 27, 2019 via email

Remzi1993 commented Dec 1, 2019

seandearnaley commented Jan 27, 2020

tujoworker commented Feb 12, 2020

wlwl2 commented Feb 13, 2020 • edited Loading

seandearnaley commented Feb 13, 2020

wardpeet commented Feb 13, 2020

tujoworker commented Feb 13, 2020

ghost commented Mar 13, 2020 • edited by ghost Loading

lannonbr commented Apr 13, 2020

karlhorky commented Apr 13, 2020 • edited Loading

ghost commented Sep 26, 2019 •

edited by ghost

Loading

d-strygwyr commented Oct 27, 2019 •

edited

Loading

bchehraz commented Nov 26, 2019 •

edited

Loading

wlwl2 commented Feb 13, 2020 •

edited

Loading

ghost commented Mar 13, 2020 •

edited by ghost

Loading

karlhorky commented Apr 13, 2020 •

edited

Loading