Remove Legacy Context API

[pungggi]

Summary

Running my App in React.StrictMode brings the following

Warning: Legacy context API has been detected within a strict-mode tree: 
    in StrictMode (at gatsby-browser.js:10)
    in _default

Please update the following components: ScrollContext

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

Basic example

gatsby/packages/gatsby-react-router-scroll/src/ScrollBehaviorContext.js

Line 103 in 3cbaade

ScrollContext.childContextTypes = childContextTypes

Motivation

Use the new Context API all over to try out Concurrent Mode now and to be prepared for React 17.
https://reactjs.org/docs/legacy-context.html

[DSchau]

@pungggi you've done a great job debugging where this issue occurs.

Would you be interested in making this change? Context was introduced in React 16.3, and our minimum supported version of React is 16.4.2, so we can make this change.

We'd love a PR! Thank you!

[paschalidi]

@DSchau and @pungggi 👋!

This looks like a nice issue ! Can I please take over and start working on it? Asking since if @pungggi who reported want to work on this that is absolutely understandable.

Thanks for reporting @pungggi and thanks for taking good care of this @DSchau!

[DSchau]

@paschalidi that'd be great! A unit test validating the fix to go along with it would be 👌 as well.

Let us know if we can help at all!

[paschalidi]

@DSchau cool! Thanks for the quick response! Will open a PR the soonest! 👍

[paschalidi]

@pungggi hey 👋, thanks from my side as well for reporting this.
I am looking a little bit onto this, could you maybe help me by explaining how to reproduce it?

What I have done is that I created a completely new gatsby app
with gatsby new my-blazing-fast-site
and then run gatsby develop from the root folder of the project.
Also have wrapped the whole app with the React.StrictMode.

This however will not give me the warning you are getting.
Explaining what you have done to get the warning will help a lot!

Thanks! 🙇

[pungggi]

hi @paschalidi you might need to import from reach-router
for example
import { navigate } from "@reach/router"
or a Link I guess
import { Link } from "gatsby"

[pungggi]

I`ve wrapped with

but I think it is the same effect as React.StrictMode ..

[paschalidi]

Thanks!

[paschalidi]

Hey @pungggi and @DSchau 👋 hope you both are doing fine and that you also having a good time!

Hmmm, it looks to me that I still cant reproduce the warning. To clear this out, I would very kindly ask you to check this repo https://github.com/paschalidi/gatsby-issue-13676.

Can please one of you clone it and run it locally and see if you can reproduce the same warning?
That would be amazing!! 🕊

[pungggi]

@paschalidi
Just add this code to gatsby-browser.js

import React from "react"

export const wrapRootElement = ({ element }) => {
  return (
    <React.unstable_ConcurrentMode>{element}</React.unstable_ConcurrentMode>
  )
}

[paschalidi]

little bit busy the last days will work on that in the weekend. apologies

[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!

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/contributefor more information about opening PRs, triaging issues, and contributing!

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

[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.

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 again for being part of the Gatsby community!

[ericmasiello]

Can we reopen this?

[DSchau]

@ericmasiello sure -- would you like to tackle the work required? It seems reasonably well scoped out!

[simnalamburt]

For those who reached here to enable strict mode in Gatsby, discussion of gatsby-react-router-scroll is being continued at #21231, and a PR regarding this issue has been opened! #21626