React 18 support

[wardpeet]

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

[mwskwong]

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.

[wardpeet]

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

[mwskwong]

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]

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]

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]

dasda @moseso

[mwskwong]

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

[wardpeet]

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

[mwskwong]

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]

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

[mwskwong]

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.

[wardpeet]

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]

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]

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

[mwskwong]

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

[mwskwong]

So after using [email protected], 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.

[ardiewen]

Just wanted to chime in with another potential issue:

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

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

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

[phil-lgr]

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

[phil-lgr]

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

[mosesoak]

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!

[EarningsCall]

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?

[tyhopp]

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.

[mwskwong]

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

[tyhopp]

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

Thanks for resurfacing this

[josehernandezv]

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

[davidpaulsson]

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

[natapg]

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

[Ozerich]

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

[jalal246]

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]

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.

[tobi-oye]

Hi i also still have this issue even with

flags: {
  DEV_SSR: true
}, 

was anyone able to resolve this ??