React 18 support #31943

wardpeet · 2021-06-16T12:49:01Z

wardpeet
Jun 16, 2021

The React team has announced the Stable version of React 18. We're part of the working groups and are adopting new features, one by one.

How to use

Install react@latest and react-dom@latest. We will automatically switch to the new CreateRoot API.

Your feedback

We're very much looking for feedback from you using React 18 and its new features. We'll expand this section with more asks and details in the future, but for now, our specific asks would be:

First and foremost, does your site fundamentally work?
Any libraries/plugins that do not work with this approach?

Notes

You're now able to use new functionality like startTransition, stateBatching, ...

Check out our React 18 e-commerce demo, the code lives at https://github.com/gatsbyjs/react-18-ecommerce-demo

Answered by tyhopp

Apr 1, 2022

Hi all, as of the recent release of gatsby 4.11 we have 100% compatibility with React 18 again. I encourage you to test it out and share feedback here with your experience.

View full answer

mwskwong · 2021-06-21T05:35:30Z

mwskwong
Jun 21, 2021

It appears that part of the application is still using ReactDOM.render. I'm getting the following error constantly:

Gatsby Info

  System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.14.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.9.5
  Browsers:
    Chrome: 91.0.4472.114
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    gatsby: ^3.7.2 => 3.7.2 
    gatsby-plugin-emotion: ^6.7.1 => 6.7.1 
    gatsby-plugin-image: ^1.7.1 => 1.7.1 
    gatsby-plugin-manifest: ^3.7.1 => 3.7.1 
    gatsby-plugin-offline: ^4.7.1 => 4.7.1 
    gatsby-plugin-react-helmet: ^4.7.1 => 4.7.1 
    gatsby-plugin-robots-txt: ^1.6.2 => 1.6.2 
    gatsby-plugin-root-import: ^2.0.6 => 2.0.6 
    gatsby-plugin-sharp: ^3.7.1 => 3.7.1 
    gatsby-plugin-sitemap: ^4.3.1 => 4.3.1 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.22 => 1.1.21 
    gatsby-source-filesystem: ^3.7.1 => 3.7.1 
    gatsby-transformer-sharp: ^3.7.1 => 3.7.1

Gatsby Flags

{
    FAST_DEV: true,
    DEV_SSR: true,
    PRESERVE_FILE_DOWNLOAD_CACHE: true,
    PRESERVE_WEBPACK_CACHE: true
}

Edit: I believe it is caused by gatsby-plugin-image. As soon as remove/comment out all instances of gatsby-plugin-image, the warning/error is not prompted again.

14 replies

wardpeet Jul 15, 2021
Author

Is there anything in particular that you're doing? it's not crashing for me

mwskwong Jul 16, 2021

I'm not sure which dependency might have caused it, but it seems that it has been working fine after a few days since I post that comment. I'm updating my dependency daily though.

mwskwong Jul 19, 2021

I saw there is a PR #32378 merged 3 days ago which is supposed to fix this issue. Yet, there is no new next release for this. May I know is there a schedule for the next next and/or public release?

stevepepple May 9, 2022

I upgraded gatsby-plugin-image and gatsby-plugin-sharp, but still see the warning. Are there any other plugins I should watch out for?

rauscht May 31, 2022

dasda @moseso

mwskwong · 2021-06-21T06:54:50Z

mwskwong
Jun 21, 2021

Another question will be, with React 18, is it possible to pre-render/SSR the entire page so that the page will have all the barebone HTML elements by default. Then, when it comes to re-hydration, it "Selective Hydrate", prioritizing those sections (wrapped in Suspense) which are either in view or users perform interaction on them?

Currently, when using Suspense, Gatsby (and properly React's fault) will display the fallback by default, while in many cases, the barebone, pre-rendered version of the components are the best "fallback".

3 replies

wardpeet Jun 22, 2021
Author

We'll be having support for suspense in SSR in version 3.9.

mwskwong Jun 22, 2021

We'll be having support for suspense in SSR in version 3.9.

That's really good news. May I know is that available in 3.9 beta now?

wardpeet Jul 1, 2021
Author

not yet, I'll get a PR up and running today or tomorrow :)

mwskwong · 2021-07-05T01:39:15Z

mwskwong
Jul 5, 2021

So I notice there is a release on npm named 3.9.0-alpha-ssr.15. If I'm not mistaken, this is the version that includes Suspense SSR's support with React 18. However, there are further releases of 3.6.0-alpha-ssr.xxx. Despite the version number appears to be an outdated version, it is newer than 3.9.0-alpha-ssr.15.

Does anyone know what is going on? I'm confused.

4 replies

wardpeet Jul 5, 2021
Author

It's something completely different, suspense support is going to land in 3.9. You can already try it if you install gatsby@next

mwskwong Jul 5, 2021

It's something completely different, suspense support is going to land in 3.9. You can already try it if you install gatsby@next

Hmm... I did install gatsby@next (which for some reason is pointing to 3.10 next) and when I use Suspense and lazy, the entire component is not SSR. Am I supposed to enable some sort of settings (e.g. flags) to make it work?

wardpeet Jul 5, 2021
Author

Thanks, I've published a new @next version and now it's part of it.

mwskwong Jul 5, 2021

Tested and it works great. I no longer need 3rd party library to achieve component-based code-splitting.

mwskwong · 2021-07-20T01:02:15Z

mwskwong
Jul 20, 2021

So after using gatsby-plugin-image@1.11.1-next, most of the ReactDOM.render warnings are gone. Yet, there is still one that remains, and it seems to originate from app.js runRender function. No flag used BTW. Would it be possible to relate to DEV_SSR?

Edit: It does seem to relate to DEV_SSR. Set it to true and the above warning can no longer be seen (I thought it is enabled by default already?). Obviously, setting FAST_DEV to true will do the same thing.

0 replies

ardiewen · 2021-11-15T03:32:20Z

ardiewen
Nov 15, 2021

Just wanted to chime in with another potential issue:

Using gatsby-plugin-image with react 18 seems to create some conflicts:

Still getting this message on latest libraries as of today (see below for exact environment):

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

Unmounting art directed images seems to cause problems in the dev environment:

Minimal repro here:
https://github.com/ardiewen/gatsby-image-react18-repro

Page / is art directed and works as expected.

Page /carousel is not art directed showing compatibility between a carousel library and non-art directed images.

Navigating using gatsby-link from / to /carousel will cause a runtime error described above.

Page /artdirected combines the carousel library with art directed images. When the carousel is dragged, it causes the same issue as navigating using gatsby-link.

Downgrading to React 17 causes the runtime errors to go away on `, but the images still "flicker" when swiped through on the art directed carousel (the non art directed carousel doesn't flicker).

Gatsby Info dump:

  System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.22.15 - /usr/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
  npmPackages:
    gatsby: ^4.1.4 => 4.1.4
    gatsby-plugin-image: ^2.1.2 => 2.1.2
    gatsby-plugin-sharp: ^4.1.3 => 4.1.3
    gatsby-plugin-styled-components: ^5.1.0 => 5.1.0
    gatsby-source-filesystem: ^4.1.2 => 4.1.2
    gatsby-transformer-sharp: ^4.1.0 => 4.1.0

0 replies

phil-lgr · 2021-11-19T18:45:56Z

phil-lgr
Nov 19, 2021

I was on

    "react": "18.0.0-alpha-55d75005b-20211011",
    "react-dom": "18.0.0-alpha-55d75005b-20211011",

with Gatsby version:

    "gatsby": "^3.14.1",

and it is working fine, except some minor hydration errors

I just tried with:

    "react": "^18.0.0-beta-149b420f6-20211119",
    "react-dom": "^18.0.0-beta-149b420f6-20211119",

And got the same message as ardiewen (#31943 (comment))

Are there any news for React beta v18 compatibility with Gatsby v3 or v4?

Thanks a lot,

Phil

1 reply

phil-lgr Nov 19, 2021

I also noticed that the demo here : https://www.gatsbyjs.com/blog/how-to-try-react-18-in-gatsby/ has images missing

mosesoak · 2022-01-18T19:20:35Z

mosesoak
Jan 18, 2022

Hi @wardpeet and Gatsby team, we also started a minimal project and got the same error,
react_devtools_backend.js:4045 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.

This happens with no flags, and using the latest releases as of today, "gatsby": "^4.5.3", "react": "^18.0.0-rc.0-next-fe905f152-20220107"

Our team is very interested in helping you get this off the ground, as our sites tend to be CPU-heavy despite existing optimization options, so we're hungry for the new Transition API. We do use Netlify CMS and rely heavily on gatsby-plugin-image in our work.

Any progress report on this front? And thanks for the effort to break this ground!

0 replies

EarningsCall · 2022-02-28T16:48:10Z

EarningsCall
Feb 28, 2022

We are currently currently using React 18 for SSR with Suspense and React's Lazy support to lazy load components.

We have tried upgrading multiple times to Gatsby 4.X but have run into issues every time. It seems that Gatsby 4 doesn't support React 18, and we are therefore stuck on Gatsby 3.14.

Is there any plan to continue React 18 support?

0 replies

tyhopp · 2022-04-01T02:34:39Z

tyhopp
Apr 1, 2022

Hi all, as of the recent release of gatsby 4.11 we have 100% compatibility with React 18 again. I encourage you to test it out and share feedback here with your experience.

3 replies

mwskwong Apr 1, 2022

And I did. Everything works fine except gatsby-plugin-offline, which I mentioned in #35193

tyhopp Apr 1, 2022

And I did. Everything works fine except gatsby-plugin-offline, which I mentioned in #35193

Thanks for resurfacing this

josehernandezv Apr 19, 2022

I'm still getting ReactDOM.render is no longer supported in React 18 with Gatsby 4.12.1

davidpaulsson · 2022-04-01T08:00:11Z

davidpaulsson
Apr 1, 2022

After updating to 4.11 and bumping react to 18, I'm getting these Hydration failed because the initial UI does not match what was rendered on the server. and There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. errors

23 replies

bared-dave Sep 8, 2022

We have recently upgraded to v4 from v2, and even paring the site right back to its most basic, I still for the life of me can't figure out why this error is occurring. It seems to be even introducing the most basic hook causes the error. As others have observed, it can sometimes be browser dependent. Rarely see it in Chrome, see it every time in Firefox.

natapg Sep 25, 2022

same issue here with gatsby 4.23.1 and react 18.2.0, we are NOT using gatsby-plugin-offline.

Ozerich Sep 29, 2022

same issue here with gatsby 4.24 and react 18.2.0, we are NOT using gatsby-plugin-offline.

jalal246 Sep 29, 2022

I had the same bug and it affected the site badly because eventually, it re-render the entire page. Not one component or section, the entire landing page loaded then it flashes and appears again.
I couldn't investigate the issue. When I build locally it's fine, when using Gatsby cloud it appears. Unfortunately, Gatsby doesn't provide a formal way to debug the production bundle. So I added process.env.NODE_ENV = "development" in gatsby-config file. That allowed me to debug React error in the development mode (Gatsby bundled still minified) and it turns out there is a mismatch in the text. I have a date that is rendered differently causing text mismatch and eventually killing the first load.
Adding timeZone to the date solves the problem while apparently pushing another bug, that again doesn't appear when running develop or build locally but only when deploying with a cloud server.

xandor-io Oct 13, 2022

I was dealing with the same issue after updating my app from gatsby v2 to v4. After reading some documentation I came across the DEV_SSR: true flag in gatsby-config.js. The feature enables SSR in development so certain bugs that previously only show up in builds (like trying to access the window object) will now be seen during development which will help speed up fixing them. See Discussion Here

flags: {
  DEV_SSR: true
},

This allowed me to test further in my dev environment. My issue had to do with alt tags not matching what was rendered on the server. After further investigation it was due to using gatsby-image. I switch to gatsby-plugin-image and this seem to resolve this issue. I follow the migration docs here using this command. npx gatsby-codemods gatsby-plugin-image .

I hope this helps, if anyone else is running into the same issue.

React 18 support #31943

How to use

Your feedback

Notes

Replies: 10 comments · 48 replies

wardpeet Jul 15, 2021 Author

wardpeet Jun 22, 2021 Author

wardpeet Jul 1, 2021 Author

wardpeet Jul 5, 2021 Author

wardpeet Jul 5, 2021 Author

Replies: 10 comments 48 replies

wardpeet Jul 15, 2021
Author

wardpeet Jun 22, 2021
Author

wardpeet Jul 1, 2021
Author

wardpeet Jul 5, 2021
Author

wardpeet Jul 5, 2021
Author