(react-scripts) Support for TypeScript 5.x

[Torniojaws]

Describe the bug

After npx create-react-app frontend --template typescript, when you update package.json to use "typescript": "^5.0.2",, npm install <any package> fails with this error:

$ npm i react-router-dom
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.0.2
npm ERR! node_modules/typescript
npm ERR!   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3
npm ERR!   node_modules/fork-ts-checker-webpack-plugin
npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm ERR!     node_modules/react-dev-utils
npm ERR!       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.1" from the root project
npm ERR!   peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
npm ERR!   node_modules/tsutils
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/eslint-plugin@5.55.0
npm ERR!     node_modules/@typescript-eslint/eslint-plugin
npm ERR!       @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR!       node_modules/eslint-config-react-app
npm ERR!         eslint-config-react-app@"^7.0.1" from react-scripts@5.0.1
npm ERR!         node_modules/react-scripts
npm ERR!       3 more (eslint-config-react-typescript, eslint-plugin-jest, the root project)
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/type-utils@5.55.0
npm ERR!     node_modules/@typescript-eslint/type-utils
npm ERR!       @typescript-eslint/type-utils@"5.55.0" from @typescript-eslint/eslint-plugin@5.55.0
npm ERR!       node_modules/@typescript-eslint/eslint-plugin
npm ERR!         @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR!         node_modules/eslint-config-react-app
npm ERR!         3 more (eslint-config-react-typescript, eslint-plugin-jest, the root project)
npm ERR!     1 more (@typescript-eslint/typescript-estree)
npm ERR!   1 more (the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"5.0.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/juha/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/juha/.npm/_logs/2023-03-19T13_21_48_738Z-debug-0.log

Did you try recovering your dependencies?

Default installation with the only change being typescript version in package.json

Which terms did you search for in User Guide?

typescript

Environment

Environment Info:

current version of create-react-app: 5.0.1
running from /home/juha/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System:
OS: Linux 4.15 Ubuntu 18.04.5 LTS (Bionic Beaver)
CPU: (1) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
Binaries:
Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
Yarn: Not Found
npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
Browsers:
Chrome: Not Found
Firefox: 105.0
npmPackages:
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
react-scripts: 5.0.1 => 5.0.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. Run npx create-react-app frontend --template typescript
2. Update package.json to use typescript: "^5.0.2"
3. Run npm install <some package>
4. Error appears

Expected behavior

npm install would run successfully.

Actual behavior

$ npm i react-router-dom
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.0.2
npm ERR! node_modules/typescript
npm ERR!   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3
npm ERR!   node_modules/fork-ts-checker-webpack-plugin
npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm ERR!     node_modules/react-dev-utils
npm ERR!       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.1" from the root project
npm ERR!   peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
npm ERR!   node_modules/tsutils
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/eslint-plugin@5.55.0
npm ERR!     node_modules/@typescript-eslint/eslint-plugin
npm ERR!       @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR!       node_modules/eslint-config-react-app
npm ERR!         eslint-config-react-app@"^7.0.1" from react-scripts@5.0.1
npm ERR!         node_modules/react-scripts
npm ERR!       3 more (eslint-config-react-typescript, eslint-plugin-jest, the root project)
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/type-utils@5.55.0
npm ERR!     node_modules/@typescript-eslint/type-utils
npm ERR!       @typescript-eslint/type-utils@"5.55.0" from @typescript-eslint/eslint-plugin@5.55.0
npm ERR!       node_modules/@typescript-eslint/eslint-plugin
npm ERR!         @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR!         node_modules/eslint-config-react-app
npm ERR!         3 more (eslint-config-react-typescript, eslint-plugin-jest, the root project)
npm ERR!     1 more (@typescript-eslint/typescript-estree)
npm ERR!   1 more (the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"5.0.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/juha/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/juha/.npm/_logs/2023-03-19T13_21_48_738Z-debug-0.log

Reproducible demo

Default CRA using npx create-react-app frontend --template typescript
modify package.json to have "typescript": "^5.0.2"
run npm install <any package>

[Gael-Tonnellier]

Same here, think it needs a minor update to accept typescript 5 . ( released a week ago )

[Meligy]

Workaround

CRA seems to work fine with TypeScript 5. So, if you need a temporary workaround for the error and happy to continue working with it, you can achieve that by creating a new overrides section in your package.json (if not existing already), and adding the same typescript version in dependences to it.

Example:

[craigmcc]

Trying the workaround from @Meligy on a small application (but with 5.0.3 instead of 5.0.2) has the following results:

• Build generates a bunch of TypeError: Cannot set property mark of #<Object> which has only a getter warnings, but does not fail the build.
• Tests pass.

I am going to test this on a more substantial application as well.

[SleighJ]

Experiencing both issues (TypeError: Cannot set property mark of #<Object> which has only a getter & the npm errors when running install)

The TypeError doesn't keep npm run build from completing, but will prevent the application from building with Docker.

For me, the mentioned work around only suppresses the error when running npm install

[KurtGokhan]

I solved the TypeError by adding "fork-ts-checker-webpack-plugin": "^6.5.3" to devDependencies, removing node_modules and lock file and reinstalling. If it doesn't work, make sure the correct version of fork-ts-checker-webpack-plugin is installed by going to the lock file, and remove package manager cache if necessary.

[matteatsleftovers]

+1 to @KurtGokhan's TypeError workaround, it worked well for the CRA-based app I'm working on. Following along with the great suggestions in this issue thread, I added some overrides that allowed successful package installation and builds without the TypeError or dependency clashes. I threw in the typescript-estree override because otherwise there was a complaint about unsupported TypeScript version when I linted my app, but YMMV on that addition.

"overrides": {
  "@typescript-eslint/typescript-estree": "^5.57.1",
  "fork-ts-checker-webpack-plugin": "^6.5.3",
  "typescript": "^5.0.3",
},

[craigmcc]

I was startled to find a subsequent result after my previous use of @Meligy suggestion. Removing the override failed with react 5.0.2, but succeeded with react 5.0.3! What the heck?

The dependency declarations for react-scripts 5.0.1 did not change, but the resulting behavior certainly did. Without any actual release notes for 5.0.3, it is not at all clear what actually changed that might have caused this.

EDIT: Never mind. Deleting node_modules and reinstalling everything (without the overrides entry) caused the error to reappear. Probably something to do with caching in my IDE.

[Tamara-Sennin]

Is there some patch coming to fix this? I updated typescript to v5 and now react-scripts is failing, and we won't put an overrides on our project, that's a workaround not a fix