Next.js 13 requires React 18.2.0 to be installed.

[dlip]

I can't build a Nextjs 13 project even though i have React 18.2.0 installed. It's new so i guess it hasn't been tested yet. It could be related to vercel/next.js#41855

 >  NX   Next.js requires React 18.2.0 to be installed.

[AsadZahed]

Just update the react and react-dom version in your package.json file.
"react": "^18",
"react-dom": "^18",

[dlip]

That didn't help unfortunately, i tried

    "react": "^18",
    "react-dom": "^18",

and

    "react": "^18.2.0",
    "react-dom": "^18.2.0",

[AgentEnder]

Can you run npm ls react and nx report and print the outputs here?

[dlip]

It seems @nrwl/next@15.0.4 needs to be updated. I created a new project:

❯ npx create-nx-workspace@latest

 >  NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Choose your style                     · integrated
✔ What to create in the new workspace   · next
✔ Repository name                       · nxnext
✔ Application name                      · next13
✔ Default stylesheet format             · css
✔ Enable distributed caching to make your CI faster · No

 >  NX   Nx is creating your v15.0.4 workspace.

   To make sure the command works reliably in all environments, and that the preset is applied correctly,
   Nx will run "npm install" several times. Please wait.

✔ Installing dependencies with npm
✔ Nx has successfully created the workspace: nxnext.

 >  NX   Successfully initialized git.

❯ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @nrwl/next@15.0.4
npm ERR! Found: next@13.0.0
npm ERR! node_modules/next
npm ERR!   next@"13.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12.1.0" from @nrwl/next@15.0.4
npm ERR! node_modules/@nrwl/next
npm ERR!   @nrwl/next@"15.0.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: next@12.3.1
npm ERR! node_modules/next
npm ERR!   peer next@"^12.1.0" from @nrwl/next@15.0.4
npm ERR!   node_modules/@nrwl/next
npm ERR!     @nrwl/next@"15.0.4" from the root project

[dlip]

Interestingly, the default app above builds ok. I wonder why my app fails, here is the output from npm ls react:

├─┬ @emotion/react@11.10.5
│ ├─┬ @emotion/use-insertion-effect-with-fallbacks@1.0.0
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ @emotion/styled@11.10.5
│ └── react@18.2.0 deduped
├─┬ @mui/icons-material@5.10.9
│ └── react@18.2.0 deduped
├─┬ @mui/lab@5.0.0-alpha.105
│ ├─┬ @mui/base@5.0.0-alpha.103
│ │ └── react@18.2.0 deduped
│ ├─┬ @mui/system@5.10.10
│ │ ├─┬ @mui/private-theming@5.10.9
│ │ │ └── react@18.2.0 deduped invalid: "^15.3.0 || ^16.0.0 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-copy-to-clipboard, "^16.8.4 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-inspector
│ │ ├─┬ @mui/styled-engine@5.10.8
│ │ │ └── react@18.2.0 deduped invalid: "^15.3.0 || ^16.0.0 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-copy-to-clipboard, "^16.8.4 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-inspector
│ │ └── react@18.2.0 deduped
│ ├─┬ @mui/utils@5.10.9
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ @mui/material@5.10.11
│ ├─┬ react-transition-group@4.4.5
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ @mui/x-date-pickers@5.0.6
│ ├── react@18.2.0 deduped
│ └─┬ rifm@0.12.1
│   └── react@18.2.0 deduped
├─┬ @reduxjs/toolkit@1.8.5
│ └── react@18.2.0 deduped
├─┬ @stripe/react-stripe-js@1.10.0
│ └── react@18.2.0 deduped
├─┬ @tanstack/react-query@4.3.9
│ ├── react@18.2.0 deduped
│ └─┬ use-sync-external-store@1.2.0
│   └── react@18.2.0 deduped
├─┬ @testing-library/react@13.4.0
│ └── react@18.2.0 deduped
├─┬ @trpc/next@10.0.0-proxy-beta.13
│ ├─┬ react-ssr-prepass@1.5.0
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ @trpc/react@10.0.0-proxy-beta.13
│ └── react@18.2.0 deduped
├─┬ formik@2.2.9
│ └── react@18.2.0 deduped
├─┬ next-auth@4.15.0
│ └── react@18.2.0 deduped
├─┬ next@13.0.0 invalid: "^12.1.0" from node_modules/@nrwl/next, "^12.2.5" from node_modules/next-auth
│ ├── react@18.2.0 deduped
│ └─┬ styled-jsx@5.1.0
│   └── react@18.2.0 deduped
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
├─┬ react-phone-input-2@2.15.1
│ └── react@18.2.0 deduped
├─┬ react-redux@8.0.2
│ └── react@18.2.0 deduped
├─┬ react-router-dom@6.4.1
│ ├─┬ react-router@6.4.1
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ react-test-renderer@18.2.0
│ ├─┬ react-shallow-renderer@16.15.0
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├── react@18.2.0
├─┬ react18-input-otp@1.1.0
│ └── react@18.2.0 deduped
└─┬ swagger-ui-react@4.14.1
  ├─┬ react-copy-to-clipboard@5.0.4
  │ └── react@18.2.0 deduped invalid: "^15.3.0 || ^16.0.0 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-copy-to-clipboard
  ├─┬ react-debounce-input@3.3.0
  │ └── react@18.2.0 deduped invalid: "^15.3.0 || ^16.0.0 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-copy-to-clipboard
  ├─┬ react-immutable-pure-component@2.2.2
  │ └── react@18.2.0 deduped invalid: "^15.3.0 || ^16.0.0 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-copy-to-clipboard
  ├─┬ react-inspector@5.1.1
  │ └── react@18.2.0 deduped invalid: "^15.3.0 || ^16.0.0 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-copy-to-clipboard, "^16.8.4 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-inspector
  ├─┬ react-redux@7.2.8
  │ └── react@18.2.0 deduped invalid: "^15.3.0 || ^16.0.0 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-copy-to-clipboard, "^16.8.4 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-inspector
  ├─┬ react-syntax-highlighter@15.5.0
  │ └── react@18.2.0 deduped invalid: "^15.3.0 || ^16.0.0 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-copy-to-clipboard, "^16.8.4 || ^17.0.0" from node_modules/swagger-ui-react/node_modules/react-inspector
  └── react@18.2.0 deduped

[AsadZahed]

Make a copy of your project in other location and then delete node modules, package-lock.
Then run: npm install --legacy-peer-deps
And see of it works that way!

[dlip]

@AsadZahed that helps with the install errors, but not with the build in my project unfortunately

[dlip]

The issue turned out to be vercel/next.js#42141
Until that is fixed you can add a .env.build file containing __NEXT_REACT_ROOT=true in your apps directory.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.