Error: Next.js requires React 18.2.0 to be installed.

[reowl666]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.18.0
  npm: 9.0.0
  Yarn: 3.2.1
  pnpm: 7.13.6
Relevant packages:
  next: 13.0.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I have React 18.2.0 installed, but I get an error Next.js requires React 18.2.0 to be installed. during build firebase.

I understand that there is a problem with the following processing of /node_modules/next/dist/build/webpack-config.js

    // Only error in first one compiler (client) once
    if (isClient) {
        if (!hasReactRoot) {
            throw new Error("Next.js requires React 18.2.0 to be installed.");
        }
    }

It can be worked around by writing __NEXT_REACT_ROOT='true' in the .env file, but the root cause is not understand.

Expected Behavior

no error

Link to reproduction

https://github.com/revoltage-inc/tmp-nextjs/tree/v1.6.2

To Reproduce

Run npm install and deploy to Firebase with the command below.

npx firebase login

npx firebase experiments:enable webframeworks

npx firebase init hosting

npx firebase deploy

However, please note that there are cases where deployment of Cloud Function fails.
firebase/firebase-tools#5157

[zdeneksvarc]

Just update the package.json file

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

Still need to rewrite the codebase, because there were breaking changes in NextJS 13. But it is another issue.

Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.

There is a simple hack from documentation npx @next/codemod new-link ./pages

[henrygrant]

@zdeneksvarc This does not solve the issue.

I just ran through making a new next repo via create-next-app, and ran these commands:

npx firebase login
npx firebase experiments:enable webframeworks
npx firebase init hosting
npx firebase deploy

And have the same problem.

  "dependencies": {
    "next": "13.0.0",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "18.11.7",
    "@types/react": "18.0.23",
    "@types/react-dom": "18.0.7",
    "eslint": "8.26.0",
    "eslint-config-next": "13.0.0",
    "typescript": "4.8.4"
  }

[reowl666]

I thought it was a problem on the Next.js side, but it seems to be a problem on the Firebase side, so I will close it.

Thankfully, firebase-tools is working on a fix below
firebase/firebase-tools#5175

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.