[gatsby-plugin-image]: Warning about createRoot after upgrading to 1.10.0

[qpiddigital]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I am receiving the following warning after upgrading Gatsby to 3.10.0 and Gatsby Image to 1.10.0 and running npm run develop.

warn ./node_modules/gatsby-plugin-image/dist/lazy-hydrate-852037ce.js
Attempted import error: 'createRoot' is not exported from 'react-dom' (imported as 's').

Reproduction Link

n/a

Steps to Reproduce

1. Upgrade Gatsby to v3.10.0 and Gatsby Image to 1.10.0
2. npm run develop

Expected Result

n/a

Actual Result

n/a

Environment

System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Xeon(R) W-2140B CPU @ 3.20GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.5.0 - /usr/local/bin/node
    npm: 7.19.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1
  npmPackages:
    gatsby: ^3.9.1 => 3.10.0
    gatsby-plugin-emotion: ^6.9.0 => 6.10.0
    gatsby-plugin-image: ^1.9.0 => 1.10.0
    gatsby-plugin-manifest: ^3.9.0 => 3.10.0
    gatsby-plugin-postcss: ^4.9.0 => 4.10.0
    gatsby-plugin-react-helmet: ^4.9.0 => 4.10.0
    gatsby-plugin-sharp: ^3.9.0 => 3.10.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^3.9.0 => 3.10.0
    gatsby-source-wordpress: ^5.9.2 => 5.10.0
    gatsby-transformer-sharp: ^3.9.0 => 3.10.0

Config Flags

No response

[ianhernandez]

Same.

$ npm outdated
...
$ npm update
$ gatsby clean && gatsby develop
...

You can now view top-secret-project in the browser.
...

warn ./node_modules/gatsby-plugin-image/dist/lazy-hydrate-852037ce.js
Attempted import error: 'createRoot' is not exported from 'react-dom' (imported as 's').
warn ./node_modules/gatsby-plugin-image/dist/lazy-hydrate-852037ce.js
Attempted import error: 'createRoot' is not exported from 'react-dom' (imported as 's').
warn ./node_modules/gatsby-plugin-image/dist/lazy-hydrate-852037ce.js
Attempted import error: 'createRoot' is not exported from 'react-dom' (imported as 's').
success Building development bundle - 17.763s
success Writing page-data.json files to public directory - 1.265s - 2/8 6.32/s
success onPreExtractQueries - 0.002s
success extract queries from components - 0.246s
success write out requires - 0.006s
warn ./node_modules/gatsby-plugin-image/dist/lazy-hydrate-852037ce.js
Attempted import error: 'createRoot' is not exported from 'react-dom' (imported as 's').
warn ./node_modules/gatsby-plugin-image/dist/lazy-hydrate-852037ce.js
Attempted import error: 'createRoot' is not exported from 'react-dom' (imported as 's').
warn ./node_modules/gatsby-plugin-image/dist/lazy-hydrate-852037ce.js
Attempted import error: 'createRoot' is not exported from 'react-dom' (imported as 's').
success Re-building development bundle - 1.146s
success Writing page-data.json files to public directory - 0.004s - 0/6 1601.30/s

$ gatsby clean
$ rm -rf node_modules/ package-lock.json
$ npm install
$ gatsby develop

but no luck

  System:
    OS: macOS 11.2.3
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Memory: 342.35 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  npmPackages:
    gatsby: ^3.9.1 => 3.10.0
    gatsby-cli: ^3.9.0 => 3.10.0
    gatsby-plugin-image: ^1.9.0 => 1.10.0
    gatsby-plugin-manifest: ^3.9.0 => 3.10.0
    gatsby-plugin-mdx: ^2.9.0 => 2.10.0
    gatsby-plugin-postcss: ^4.9.0 => 4.10.0
    gatsby-plugin-react-helmet: ^4.9.0 => 4.10.0
    gatsby-plugin-sharp: ^3.9.0 => 3.10.0
    gatsby-plugin-sitemap: ^4.5.0 => 4.6.0
    gatsby-source-filesystem: ^3.9.0 => 3.10.0
    gatsby-transformer-json: ^3.9.0 => 3.10.0
    gatsby-transformer-sharp: ^3.9.0 => 3.10.0
    react: ^17.0.2 => 17.0.2

Looks like a possible react 18 issue? I'm not using DEV_SSR.

Clue?
1b45c7b

[hendra-go]

same here.
but when i upgrade react and react-dom to v18.0.0-alpha, the error in gatsby-plugin-image disappear and become gatsby-plugin-sharp like in issue #32445

[kalebheitzman]

Same issue even after issuing gatsby clean.

[LekoArts]

Hi, thanks for the issue!

While it shows a warning it will continue working. It shows it because with #32378 we imported it for React 18 support but check for its existence and fallback if not existent. Once we fix the import the warning will go away.

[LekoArts]

Fixed in [email protected]

[qpiddigital]

Fixed in [email protected]

Thank you for the great support for Gatsby as always!