Skip to content

[React 19] Wrong @types/react* default version and build fails if the correct version is installed #65599

@mwskwong

Description

@mwskwong

Link to the code that reproduces this issue

https://github.com/mwskwong/wrong-react-19-types

To Reproduce

  1. Run next build and observe the terminal output.

Current vs. Expected behavior

Current

When creating a new Next.js project, types/react@^18 and types/react-dom@^18 are used. These types are for React 18, not 19.

If we follow https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing to install the React 19 compatible @types/react and @types/react-dom (already done in the above repo), Next.js will believe @types/react is not installed when running next build:

It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Installing dependencies

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).


Installing devDependencies (npm):
- @types/react

In CI env, e,g. when deploying on Vercel, the build will straight up fail without the above patching

Expected

Build should be successful.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32493
  Available CPU cores: 20
Binaries:
  Node: 20.12.2
  npm: N/A
  Yarn: N/A
  pnpm: 8.14.1
Relevant Packages:
  next: 14.3.0-canary.54 // Latest available version is detected (14.3.0-canary.54).
  eslint-config-next: 14.3.0-canary.54
  react: 19.0.0-beta-4508873393-20240430
  react-dom: 19.0.0-beta-4508873393-20240430
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app, Linting, TypeScript

Which stage(s) are affected? (Select all that apply)

next build (local), Vercel (Deployed)

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    LintingRelated to `next lint` or ESLint with Next.js.TypeScriptRelated to types with Next.js.bugIssue was opened via the bug report template.create-next-appRelated to our CLI tool for quickly starting a new Next.js application.locked

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions