Error: Required TypeScript & Types packages, despite being installed

[ryandotelliott]

Verify canary release

• [X] I verified that the issue exists in Next.js canary release

Provide environment information

  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:45:05 PDT 2022; root:xnu-8020.101.4~15/RELEASE_X86_64
Binaries:
  Node: 16.13.2
  npm: 8.1.2
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.1.6-canary.2
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

After running yarn create next-app next-tailwind-typescript-starter --example with-typescript then yarn build, I get the error

Please install typescript, @types/react, and @types/node by running:

yarn add --dev typescript @types/react @types/node

My package.json

{
    "private": true,
    "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start",
        "type-check": "tsc"
    },
    "dependencies": {
        "@aws-sdk/client-s3": "^3.67.0",
        "@types/mongodb": "^4.0.7",
        "dotenv": "^16.0.0",
        "formidable": "^3.2.1",
        "mongodb": "^4.5.0",
        "next": "^12.1.6-canary.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-icons": "^4.3.1",
        "uniqid": "^5.4.0"
    },
    "devDependencies": {
        "@types/node": "^17.0.24",
        "@types/react": "=18.0.1",
        "@types/react-dom": "^17.0.1",
        "postcss-preset-env": "^7.4.3",
        "tailwindcss": "^3.0.23",
        "typescript": "^4.6.3"
    },
    "version": "1.0.0"
}

My tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve"
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

This error was mentioned in #36085, #36103, and #36103. I have attempted to change the Next version to the most recent canary as well as the specified 12.1.5-canary.6. Additionally, I have attempted to downgrade @types/react to version 18.0.1.

Expected Behavior

next build should not result in any errors and should deploy successfully.

To Reproduce

Run yarn create next-app next-tailwind-typescript-starter --example with-typescript and yarn add --dev @types/react @types/react-dom @types/node. Attempt to build (specifically on Vercel in my case) with next build.

[ryandotelliott]

By moving all devDependencies into dependencies I've temporarily solved the issue, but this feels like a very incorrect solution.

[ijjk]

Hi, can you confirm your lockfile package-lock.json or yarn.lock (note you should only have one or the other) was properly updated between deploys? It sounds like it may have been out of date and after moving your devDependencies to dependencies it got updated.

[ryandotelliott]

Hi, can you confirm your lockfile package-lock.json or yarn.lock (note you should only have one or the other) was properly updated between deploys? It sounds like it may have been out of date and after moving your devDependencies to dependencies it got updated.

it looks like my Yarn.lock is correct, but I could be wrong. Here's the lock for Next:

next@canary:
  version "12.1.6-canary.2"
  resolved "https://registry.yarnpkg.com/next/-/next-12.1.6-canary.2.tgz#b783c8805cfeda5f1686147c674447a94940ffae"
  integrity sha512-zlW8wu8Hl1xKfYhQId4vvQrPwktaUk6ccnfMrLubnbdX+jF6HbBY/vgFrflW0J+rvwDlBWfyvmZ8N6IRW0zIWQ==
  dependencies:
    "@next/env" "12.1.6-canary.2"
    caniuse-lite "^1.0.30001283"
    postcss "8.4.5"
    styled-jsx "5.0.1"
  optionalDependencies:
    "@next/swc-android-arm-eabi" "12.1.6-canary.2"
    "@next/swc-android-arm64" "12.1.6-canary.2"
    "@next/swc-darwin-arm64" "12.1.6-canary.2"
    "@next/swc-darwin-x64" "12.1.6-canary.2"
    "@next/swc-linux-arm-gnueabihf" "12.1.6-canary.2"
    "@next/swc-linux-arm64-gnu" "12.1.6-canary.2"
    "@next/swc-linux-arm64-musl" "12.1.6-canary.2"
    "@next/swc-linux-x64-gnu" "12.1.6-canary.2"
    "@next/swc-linux-x64-musl" "12.1.6-canary.2"
    "@next/swc-win32-arm64-msvc" "12.1.6-canary.2"
    "@next/swc-win32-ia32-msvc" "12.1.6-canary.2"
    "@next/swc-win32-x64-msvc" "12.1.6-canary.2"
    ```

[talazenkot]

The same happens to me. The only thing that solved the issue was moving ALL of the dev dependencies to the regular dependencies list.

[ffastym]

The same issue. locally works fine, but on the AWS CodeBuild crashes

UPD: moving ALL of the dev dependencies to the regular dependencies fixed problem, but looks not good :-/ looks like locally uses dependencies installed globally

[ijjk]

Hi, I'm not able to reproduce this following the steps shared, please provide a reproduction with a repo where you are seeing this occur (test deployment can be seen here).

[y471n]

I'm also getting the same issue. @DeveloperRyan Were you able to solve this somehow?

[imogenkinsman]

Same issue, blocking vercel deploys. Moving everything out of devDependencies reduces the failure down to:

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

Edit: solved with violence. Blew up my package-lock and regenerated it.

[ijjk]

@imogenkinsman can you share the repo you saw this occur on before regenerating the package-lock?

[stephank]

I believe this is fixed. Newer versions of @types/react contain exports in package.json, which means the old Next.js detection broke. It was essentially doing require.resolve("@types/react/index.d.ts"), which stopped working.

The fix is in https://github.com/vercel/next.js/commit/da6f271d9be8eb96727d8a8079d0b01aabb36faa and is part of v12.1.5 and up.

EDIT: Just noticed that that fix should also already be in the versions mentioned by @DeveloperRyan, so this may be unrelated.

[macefti276]

Seems like there is a bug in some @types/react version. The issue was solved for me by simply updating the @types/react version

In case of npm, do this, npm install --save-dev @types/[email protected]

And for yarn, do yarn add @types/[email protected]

[github-actions[bot]]

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.