Gatsby fails to build on React 18

giantrobotbee commented 2 years ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] 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

Using React 18 Gatsby 4.24 (tested on @next as well)


failed Building development bundle - 171.165s
ERROR in ./.cache/app.js 60:23-50
Module not found: Error: Can't resolve 'react-dom/client' in '/Users/giantrobotbee/dev/workspace/gatsby-test/.cache'

ERROR in ./.cache/react-dom-utils.js 20:25-52
Module not found: Error: Can't resolve 'react-dom/client' in '<my_dir>/.cache'
 @ ./.cache/head/head-export-handler-for-browser.js 14:21-50
 @ ./.cache/page-renderer.js 18:35-84
 @ ./.cache/query-result-store.js 18:43-69
 @ ./.cache/root.js 24:24-55
 @ ./.cache/app.js 34:36-53

develop compiled with 2 errors```

I have tried blowing away everything and starting from scratch to no avail.

React is at "react": "^18.2.0",

### Reproduction Link

None

### Steps to Reproduce

1. run `gatsby develop`
2. be sad

### Expected Result

Build works

### Actual Result

Build breaks

### Environment

```shell
System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 106.0.5249.103
    Firefox: 105.0.2
    Safari: 16.0
  npmPackages:
    gatsby: ^4.24.0 => 4.24.3 
    gatsby-awesome-pagination: ^0.3.6 => 0.3.8 
    gatsby-cli: ^4.24.0 => 4.24.0 
    gatsby-image: ^3.11.0 => 3.11.0 
    gatsby-plugin-canonical-urls: ^4.24.0 => 4.24.0 
    gatsby-plugin-create-client-paths: ^4.9.0 => 4.9.0 
    gatsby-plugin-eslint: ^4.0.2 => 4.0.2 
    gatsby-plugin-google-tagmanager: ^4.24.0 => 4.24.0 
    gatsby-plugin-image: ^2.24.0 => 2.24.0 
    gatsby-plugin-manifest: ^4.24.0 => 4.24.0 
    gatsby-plugin-mixpanel: ^3.3.0 => 3.7.0 
    gatsby-plugin-react-helmet: ^5.4.0 => 5.24.0 
    gatsby-plugin-react-svg: ^3.0.1 => 3.1.0 
    gatsby-plugin-remove-console: ^0.0.2 => 0.0.2 
    gatsby-plugin-sharp: ^4.24.0 => 4.24.0 
    gatsby-plugin-styled-components: ^5.4.0 => 5.24.0 
    gatsby-plugin-typescript: ^4.24.0 => 4.24.0 
    gatsby-source-buttercms: ^2.2.6 => 2.2.6 
    gatsby-source-filesystem: ^4.24.0 => 4.24.0 
    gatsby-source-graphql: ^4.24.0 => 4.24.0 
    gatsby-transformer-sharp: ^4.24.0 => 4.24.0

Config Flags

No response

LekoArts commented 2 years ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

giantrobotbee commented 2 years ago

@LekoArts So I tried to make one, but the sandbox tools do not seem to suffer this issue. My hope was that it would ring a bell to someone, but I can't make it happen in a clean environment.

LekoArts commented 2 years ago

Hi!

Since we didn't receive an answer for 7 days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or open a new issue with a reproduction. Thanks!

gatsbyjs / gatsby