gatsby: Using causes error in console: `Warning: Unsafe lifecycle methods were found within a strict-mode tree`

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 1
  • Comments: 34 (9 by maintainers)

Most upvoted comments

This issue will now hit a lot more consumers, due to React 16.9.

Has anybody looked into using react-helmet-async as a replacement? This article by the creator cites the lack of activity at react-helmet as a major motivation for a fork:

https://open.nytimes.com/the-future-of-meta-tag-management-for-modern-react-development-ec26a7dc9183

At this point react-helmet-async has as many weekly downloads as react-helmet.

https://www.npmjs.com/package/react-helmet-async

This problem has been fixed by the release of React Helmet v6. gatsby-plugin-react-helmet has already been updated to support the new version (thanks to @stevenocchipinti 🎉).

To update your site:

  • install gatsby-plugin-react-helmet@3.2.2 or later
  • install react-helmet@6.0.0 or later
  • ensure you’re using a named import when you import the Helmet component import { Helmet } from "react-helmet"

Seems like parts of the community is already opting for gatsby-plugin-react-helmet-async.

To move forward with this issue, maybe we could update the docs, switch the default meta tag manager in the official Gatsby starters… and eventually deprecate gatsby-plugin-react-helmet in favor of gatsby-plugin-react-helmet-async? What do you think?

@sever1an thank you for taking the time to write such a comprehensive post. Sadly we’re not able to move away from react-helmet in v2 as it would be a breaking change with gatsby-plugin-react-helmet.

What’s the reason to use StrictMode?

@wardpeet Would it be possible to add this to the milestone for the next major version?