The official documentation for creating a NextJS app with Typescript doesn't seem to work-CodePudding

I've been trying to use Typescript for my NextJS projects for a moment... I thought getting started with Typescript would be the hardest, but no: its installation is even more complicated.

I followed what's said on the official documentation (to create a new project).

Here is what i've done exactly:

npx create-next-app --ts
cd test-nextts
npm run dev

Here is the error I'm getting on npm run dev:

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/react by running:

        npm install --save-dev @types/react

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

It's saying that I don't have the "required package(s) installed", whereas I do. Here is the package.json automatically generated after npx create-next-app --ts:

{
  "name": "test-nextts",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.4",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "18.0.2", // <--- HERE IT IS
    "@types/react-dom": "18.0.0",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.4",
    "typescript": "4.6.3"
  }
}

It asks me to run npm install --save-dev @types/react (even though I should not have to do it). The process happens normally:

up to date, audited 228 packages in 714ms

63 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Therefore, I try another npm run dev, and here is the problem: it prints the exact same error over and over again! Why?

I have the same error if I try to modify an existing Javascript project.

Please, help me.

CodePudding user response：

This is a known bug, the latest version of create-next-app doesn't work with React 18

Here is the official issue: https://github.com/vercel/next.js/issues/36085

Subscribe to follow it