search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.83k stars 26.88k forks source link

(react-scripts) Support for TypeScript 5.x #13080

Open Torniojaws opened 1 year ago

Torniojaws commented 1 year ago

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 commented 1 year ago

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

Meligy commented 1 year ago

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:

image
craigmcc commented 1 year ago

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

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

SleighJ commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

+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 commented 1 year ago

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 commented 1 year ago

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

stefanzero commented 1 year ago

This worked for me:

npm install react-router-dom@6 --legacy-peer-deps

arcasoy commented 1 year ago

Just bringing this PR to attention to hopefully bump it's visibility and get it approved. This should resolve the issue going forward: #13071

Mihai1iMob commented 1 year ago

I just used this override in package.json to make npm i work:

    ...
    "fork-ts-checker-webpack-plugin": "^6.5.3",
    ...
    "typescript": "^5.0.4"
  },
  "overrides": {
    "react-scripts": {
      "typescript": "^5"
    }
  },
bru8787 commented 1 year ago

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>

Yes , its still an active issue , for me solved removing typescript , running npm i and then install again typescript...

didymus707 commented 1 year ago

I am having the same issue. I added typescript 5.0.4. I can't install any new packages as it throws an error

bru8787 commented 1 year ago

I am having the same issue. I added typescript 5.0.4. I can't install any new packages as it throws an error

1:try unistall firstly typescript... 2: install react or the pkg u trying to install ...

3:reinstall typescript

it worked for me.. hope the same for you

rever96 commented 1 year ago

Uninstall and reinstall doesn't fix.

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: geko-front-end@1.0.0
npm WARN Found: typescript@4.9.5
npm WARN node_modules/typescript
npm WARN   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.2
npm WARN   node_modules/fork-ts-checker-webpack-plugin
npm WARN     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm WARN     node_modules/react-dev-utils
npm WARN   3 more (react-scripts, tsutils, the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm WARN node_modules/react-scripts
npm WARN   react-scripts@"^5.0.1" from the root project

Should I back to typescript ^4?

dsclassen commented 1 year ago

I think react-scripts is dead. Maybe consider converting your project to Vite?

bru8787 commented 1 year ago

Uninstall and reinstall doesn't fix.

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: geko-front-end@1.0.0
npm WARN Found: typescript@4.9.5
npm WARN node_modules/typescript
npm WARN   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.2
npm WARN   node_modules/fork-ts-checker-webpack-plugin
npm WARN     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm WARN     node_modules/react-dev-utils
npm WARN   3 more (react-scripts, tsutils, the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm WARN node_modules/react-scripts
npm WARN   react-scripts@"^5.0.1" from the root project

Should I back to typescript ^4?

thats should be another solution , as i know this issue happend only with "typescript": "^5.0.4"

try downgrade , install pkg ,and then back to "typescript": "^5.0.4"

ShahzaibAyyub commented 1 year ago

Any updates? this issue is still persistent on typescript 5.1.3

ikang9712 commented 1 year ago

dsclassen's advice to change from script to vite was awesome! I change to vite and all problems were gone. If you want to change from CRA project to vite, follow this article! https://cathalmacdonnacha.com/migrating-from-create-react-app-cra-to-vite

alexchandel commented 1 year ago

@dsclassen @ikang9712 vite is an inferior solution, and gives off grunt vibes. Just from your link, it requires multiple top-level packages and tedious custom configuration, and it has circular dependency issues. CRA just worked. Please fix CRA and react-scripts.

Enkratia commented 1 year ago

npm r typescript npm i typescript@4.9.5

works fine

alex-titarenko commented 1 year ago

On March 16, 2023, React published new docs and dropped support for the old docs. In the new docs, they no longer recommend CRA as a solution for creating React applications. It essentially means it's dead. Instead of waiting for the fix here, I would recommend trying to find alternatives to migrate out of the CRA. You can find many articles confirming my statement.

craigmcc commented 1 year ago

npm r typescript npm i typescript@4.9.5

works fine

Which is EXACTLY the problem reported by this issue 😛.

If react-scripts did not have a dependency check that disallowed any 5.x version of typescript, we would all be happy,

It still does (no new release), and has ever since typescript@5 was released.

Mihai1iMob commented 1 year ago

@dsclassen @ikang9712 vite is an inferior solution, and gives off grunt vibes. Just from your link, it requires multiple top-level packages and tedious custom configuration, and it has circular dependency issues. CRA just worked. Please fix CRA and react-scripts.

CRA & react-scripts is dead, and for good reasons... I suggest following @alex-titarenko advice:

On March 16, 2023, React published new docs and dropped support for the old docs. In the new docs, they no longer recommend CRA as a solution for creating React applications. It essentially means it's dead. Instead of waiting for the fix here, I would recommend trying to find alternatives to migrate out of the CRA. You can find many articles confirming my statement.

gpkc commented 1 year ago

CRA & react-scripts is dead, and for good reasons...

What kind of good reasons?

jmevel commented 1 year ago

@dsclassen @ikang9712 vite is an inferior solution, and gives off grunt vibes. Just from your link, it requires multiple top-level packages and tedious custom configuration, and it has circular dependency issues. CRA just worked. Please fix CRA and react-scripts.

CRA & react-scripts is dead, and for good reasons... I suggest following @alex-titarenko advice:

On March 16, 2023, React published new docs and dropped support for the old docs. In the new docs, they no longer recommend CRA as a solution for creating React applications. It essentially means it's dead. Instead of waiting for the fix here, I would recommend trying to find alternatives to migrate out of the CRA. You can find many articles confirming my statement.

Just gave Vite a try by creating a dummy project (React + TypeScript). Got an error when I tried to npm install even though this is exactly what it told me to do.

Honestly it doesn't seem any better than CRA for the moment, creating a sample project doesn't work as well.

Also I stumbled on this open issue from 2021 and I don't really like the look of this.

Mihai1iMob commented 1 year ago

CRA & react-scripts is dead, and for good reasons...

What kind of good reasons?

well just found this with a google search https://dev.to/ag2byte/create-react-app-is-officially-dead-h7o :

The problem with CRA

For far too long,create-react-app or CRA has had problems with its performance. It is slow and bulky compared to the modern methods. The initial setup is quite bulky as there are a lot of dependencies to be installed. It also is outdated as the dependencies themselves suffer from warnings during installation. These problems have troubled developers for far too long. Since CRA was the officially supported way, beginners had a hard time solving these issues.

and here are my thoughts:

  1. Most importantly, dev server is slow af, start and hot-reload / it's to tightly coupled to webpack (which itself is slow and hard to configure) and you better hope there is no additional configuration you have to do since it's a pain because you have to eject...
  2. it's bloated with a lot of legacy code from 7+ years ago / it has hacks and workarounds for stuff made a long time ago which now are done in better ways / it has a lot of dependencies and a good fraction of them are pretty outdated
  3. Painful to setup with popular tools like tailwind & TS
  4. Even the React team have abandoned CRA in their (new) docs
  5. There are other better options (Vite or NextJs for full-stack)

Here are some other helpful resources I followed on youtube:

isumix commented 1 year ago

Still the same issue. Is react-scripts dead? If so, what are the other options?

josdejong commented 1 year ago

@isumix read the last comment: https://github.com/facebook/create-react-app/issues/13080#issuecomment-1623774848

Mihai1iMob commented 1 year ago

yes it's dead, the options are:

  1. workarounds with overrides mentioned above (https://github.com/facebook/create-react-app/issues/13080#issuecomment-1515280885)
  2. migrate to vite
njpanderson commented 1 year ago

Found this issue after doing a bit of React refreshing and experiencing the same cross dependency issue.

On March 16, 2023, React published new docs and dropped support for the old docs. In the new docs, they no longer recommend CRA as a solution for creating React applications. It essentially means it's dead. Instead of waiting for the fix here, I would recommend trying to find alternatives to migrate out of the CRA. You can find many articles confirming my statement.

other comments on CRA's demise

https://react.dev/learn/tutorial-tic-tac-toe

This tutorial still uses CRA via the forked examples: https://react.dev/learn/tutorial-tic-tac-toe#setup-for-the-tutorial

Maybe this canonical, front facing tutorial should get changed if CRA is considered to be dead?

asiimwearnold commented 1 year ago

I got a similar issue while installing Tailwind CSS, and resolved the issue by adding [ --legacy-peer-deps] to look like npm install -D tailwindcss postcss autoprefixer --legacy-peer-deps

yashv456 commented 1 year ago

can anybody help i am facing the same issue

ChromeQ commented 1 year ago

can anybody help i am facing the same issue

@yashv456 There are a few solutions mentioned further up, mainly around using overrides. It looks like you are quite new to development (correct me if I'm wrong) so I would suggest to look into npm/yarn overrides and go from there.

I paused my project using this so I never got to fix it so can't provide a copy and paste answer for you unfortunately.

yashv456 commented 1 year ago

@ChromeQ yup i did the legacy peer deep command and my project is back on track and i also needed to convert back my ts file to js file so this way i was able to save the project

ChromeQ commented 1 year ago

@yashv456 If you are "convert back my ts file to js file" -- if you are using js and not ts then this problem should not be affecting you, this issue is specifically about the typescript version and if you are using plain js then you can uninstall typescript and none of this should be a problem.

StergiosAnastasiadis commented 1 year ago

Have you tried it with yarn? i had a similar issue with some dependencies with npm but when i tried it with yarn it worked.

aakagi commented 1 year ago

I had to use "resolutions" instead of "overrides". (Using yarn)

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.11.0",
    "@typescript-eslint/parser": "^6.11.0",
    "typescript": "^5.2.2",
  }
  "resolutions": {
    "@typescript-eslint/eslint-plugin": "^6.11.0",
    "@typescript-eslint/parser": "^6.11.0",
    "fork-ts-checker-webpack-plugin": "^6.5.3",
    "typescript": "^5.2.2"
  },
HassanBharu commented 11 months ago

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:

image

used this as a workaround, pipeline is now building with no error, but I'm guessing there is still not actual fix? in package.json its put dev=true against allot of the modules, will this impact anything else? or any other environments

hokwanhung commented 11 months ago

I just used this override in package.json to make npm i work:

    ...
    "fork-ts-checker-webpack-plugin": "^6.5.3",
    ...
    "typescript": "^5.0.4"
  },
  "overrides": {
    "react-scripts": {
      "typescript": "^5"
    }
  },

Currently using this workaround, but I just hope this issue will get solved one day - as it really is not a fix, and consists of risks for projects requiring high stabilities of dependencies.

craigmcc commented 11 months ago

It is extremely unlikely that this will ever get officially "fixed".

Create React App is basically dead. Nothing has been updated for over two years now. Even the documentation about it has been migrated to a "legacy" URL:

https://legacy.reactjs.org/docs/create-a-new-react-app.html

The React team recommends using a different toolchain, including (for example) Next.js that has implementation support for React Server Components and Server Actions.

cristianocca commented 11 months ago

Looking for an update as well. Sadly, CRA is still widely used and the migration is unjustifiable right now.

jvictordev1 commented 10 months ago

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:

image

thanks man this worked!!!!

benjamind01 commented 2 months ago

Updating this issue in hopes of finding a solution. The override workaround isn't suitable for a production project.

leviathanbadger commented 2 months ago

Updating this issue in hopes of finding a solution. The override workaround isn't suitable for a production project.

...seriously? CRA has been dead in the water for about two years now, including security updates. The solution is to switch to vite or another bundler that has active support and maintenance. The override workaround is almost certainly the best you are going to get in the meantime.

stefpb commented 2 weeks ago

Thank you @leviathanbadger ! Was an inspiration to switch to vite and, despite eject and custom webpack-config, it was much easier to switch to vite than I thought. I'm much happier now. Now that I've switched manually, I also found this migration tool from Create-React-App to vite, but haven't tested it: https://github.com/bhbs/viject