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

[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

[mwskwong]

I suspect it is caused by the name of @types/react being changed to types-react in package.json and this affects how resolveFrom works.

next.js/packages/next/src/lib/resolve-from.ts

Line 8 in cc10bf5

export const resolveFrom = (

[patelvivekdev]

I am using react 19 with next canary 14.3.0-canary.58

  "@types/react": "18.2.74",
  "@types/react-dom": "18.2.23",

You can check the Portfolio and my Repo

[mwskwong]

For now, a workaround is to patch next to remove its checking on whether @types/react exists during next build. I have to admit this workaround is quite hacky, but it will do the job before a proper fix is landed/React moves types-react back to @types/react.

diff --git a/node_modules/next/dist/lib/verify-typescript-setup.js b/node_modules/next/dist/lib/verify-typescript-setup.js
index 23998d8..da91cf4 100644
--- a/node_modules/next/dist/lib/verify-typescript-setup.js
+++ b/node_modules/next/dist/lib/verify-typescript-setup.js
@@ -72,11 +72,6 @@ const requiredPackages = [
         pkg: 'typescript',
         exportsRestrict: true
     },
-    {
-        file: '@types/react/index.d.ts',
-        pkg: '@types/react',
-        exportsRestrict: true
-    },
     {
         file: '@types/node/index.d.ts',
         pkg: '@types/node',

[mwskwong]

I am using react 19 with next canary 14.3.0-canary.58

  "@types/react": "18.2.74",
  "@types/react-dom": "18.2.23",

You can check the Portfolio and my Repo

It will work for the most part, but again @types/react*@^18 is meant to be used with React 18, not 19. There are some differences in the API between the two versions.

e.g.

// initial value for useRef() is now mandatory for React 19, 
// but @types/react@^18 won't complain on that if it's missing
const ref = useRef(null);
// refs are now always mutable in React 19 due to the previous change in API, 
// but @types/react@^18 will complain about this line, since refs with initial values are read-only in React 18
ref.current = newValue;

[joaopedrodcf]

I guess this is still something that was tackled in #65058 and needs to be to make us able to use react 19 beta in nextjs canary

[joaopedrodcf]

Hey @mwskwong typings are now working correctly with nextjs 15 RC and using the following type dependencies:

package.json

    "dependencies": {
        "next": "15.0.0-rc.0",
        "react": "19.0.0-rc-935180c7e0-20240524",
        "react-dom": "19.0.0-rc-935180c7e0-20240524",
    },
    "devDependencies": {
        "@types/react": "npm:types-react@19.0.0-rc.0",
        "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
    },

[github-actions]

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