Using <StrictMode /> causes error in console: `Warning: Unsafe lifecycle methods were found within a strict-mode tree`

[JustFly1984]

I'm using gatsby as example environment for new google maps api, and I need to test it with SSR, but at the same time I need to test it in strict mode, but instead of showing me errors in my own code, it errors out on gatsby's code.

Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in StrictMode (at pages/index.js:66)
    in IndexPage (created by PageRenderer)
    in PageRenderer (created by JSONStore)
    in JSONStore (created by EnsureResources)
    in ScrollContext (created by EnsureResources)
    in RouteUpdates (created by EnsureResources)
    in EnsureResources (created by RouteHandler)
    in RouteHandler (created by Root)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by Root)
    in Root
    in _default (created by HotExported_default)
    in AppContainer (created by HotExported_default)
    in HotExported_default

componentWillMount: Please update the following components to use componentDidMount instead: SideEffect(NullComponent)

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

[jonniebigodes]

That's because and i'm just guessing, as i'm not knowledgeable of all the gatsby code, but deep down somewhere in some components used in gatsby, or one of the libraries you're using, there might be some now deprecated methods being used. And correcting that might take some time as the React ecosystem is constantly evolving and not only gatsby, but other libraries also, will take some time to adjust to this constant evolution.
But does the build break, or does it succeed but with the warnings?

[JustFly1984]

I hadn't tried to build for prod with yet, it warns in develop only.

[jonniebigodes]

I'm inclined to say that this will happen in production mode as well.
You're probably going to get the same warnings.
But it's currently working, even with the warning? That's what i wanted to ask aswell

[JustFly1984]

It is warning, not an error, so yes it does not crush an app by itself, but if you have scripts, which tracking errors, it spams a system with false negatives, and google lighthouse audit tool lowers your performance grade. Console.log is not cheap IO operation, especially with warnings.

[jonniebigodes]

@JustFly1984 i'm going to cc this issue to two people more knowledgeable of the library so that they are made aware of the issue if you don't mind.
@pieh @DSchau , care to chime in if you can.

[pieh]

but instead of showing me errors in my own code, it errors out on gatsby's code.

Actually that's not entirely true - it shows "stack trace" which originates from gatsby runtime, but actually end up in your code:

Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in StrictMode (at pages/index.js:66) // this points to your code
    in IndexPage (created by PageRenderer) // IndexPage is your page component
    in PageRenderer (created by JSONStore)

componentWillMount: Please update the following components to use componentDidMount instead: SideEffect(NullComponent)

Do You perhaps use https://github.com/gaearon/react-side-effect ? (or maybe some of your dependencies use it)

[JustFly1984]

Nope, I was using static gDPFS, not WillMount. I do not have willMount in my code, cos I did refactor it since long time ago, and search across project proves it.

@pieh id you can se the stack trace starts in StrictMode and bubbles (unwraps) from the button to the top the component tree, so the strict mode is the root element of IndexPage, and after that it is gatsby's code till AppContainer and HotExported_default, which is react-hot-reload's code, and errors out exactly react-hot-loader

in Root
    in _default (created by HotExported_default) Gatsby
    in AppContainer (created by HotExported_default)
    in HotExported_default's component

[pieh]

I did some quick investigation with default starter and in this case it seems like react-helmet (which uses react-side-effect, which in turns still use cWM) is likely suspect here. If I don't use react-helmet (or move it outside of StrictMode), warning disappear. There is issue in react-side-effect about usage of cWM - gaearon/react-side-effect#54 .

We don't use componentWillMount or react-side-effect in gatsby code, so there's little we can do about this (aside from looking for alternative for react-helmet and porting default starters to something else)

[JustFly1984]

Thank you, this explain some stuff, I'm pretty sure it will be fixed by Dan asap

[gatsbot]

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!

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

[JustFly1984]

not stale

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!