Next.js is not recognizing '@types/react'

I used yarn add -D @types/[email protected] and it worked perfectly! Netsu is right, seems like there is a bug in the current @types/react version (specifically v18.0.2).

Note that Next 11 has a slightly dodgy check for the existence of @types/react. The later package has simply chosen to express its exports in a different but valid way (which fails the check). After a slightly annoying manual binary-search I can say the latest version of @types/react for React 17 which Next 11 can accept is 17.0.46

The same check may still be in place for later versions of Next, which would explain why people are reporting they can use @types/react 18.0.1 with it but not 18.0.2.

(at the time of writing the latest versions of Next 11 and React 17 are [email protected] and @types/[email protected], so this situation could change, but both are probably considered legacy at this point, so it might not. I'm only using Next 11 and React 17 as stepping stones in an upgrade to current versions)

You want to make sure your versions of @types/react, react, and react-dom are locked and aligned in package.json

diff --git a/package.json b/package.json
index 3508c106..cbc412d0 100644
--- a/package.json
+++ b/package.json
@@ -47,9 +47,9 @@

-    "react": "^17.0.2",
+    "react": "17.0.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "17.0.2",
-    "@types/react": "^17.0.0",
+    "@types/react": "17.0.2",

Consider disabling optimistic updates for build stability. If you are using the CLI you may require usage of the save-exact command

npm install --save-exact '[email protected]' // etc

My solution was to add --only to production:

RUN yarn install --only=production

An alternative approach i took here was to create a new nextjs project using npx create-next-app. And then copied the versions of all the dependencies and devDependencies.

Here is a sample package.json. I got this after create new nextjs project.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.7.1",
    "@types/react": "18.0.17",
    "@types/react-dom": "18.0.6",
    "eslint": "8.21.0",
    "eslint-config-next": "12.2.4",
    "typescript": "4.7.4"
  }
}

Copy all the versions listed in the package.json you get after create new nextjs project. This will ensure that your core dependencies are compatible with each other.

I was also hitting this error. Turns out I didn't have yarn installed which prevented the library from being auto installed when I tried to run applications using the command:

npm run dev

To correct the problem install yarn using the following command:

sudo npm install -g yarn

Then retry to the start command for the app:

npm run dev

I recently ran into this issue when starting an old project, I solution was to use older version of node modules, installing node module with version 14.21.3 LTS worked for me.