create-react-app: 4.0.0 breaks with typescript (all versions)
Describe the bug
I made a clean install of cra@next with typescript and then upgraded typescript to 4.1.0-beta
( also tested 4.1.0-dev.20201023
)
npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app
$$$ then replaced typescript 4.0.3 with 4.1.0-beta ( or ^4.1.0-beta ) in package.json
rm -rf node_modules package-lock.json && npm i
npm start
Error message:
node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
appTsConfig.compilerOptions[option] = value;
^
TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
( EDIT: This doesn’t happen with cra 4.0.0-next.98 )
Did you try recovering your dependencies?
Yes
Which terms did you search for in User Guide?
I just looked for typescript bugs reported and closed in the last few days
Environment
System: OS: macOS 10.15.7 CPU: (8) x64 Intel® Core™ i7-4770K CPU @ 3.50GHz Binaries: Node: 14.14.0 - /usr/local/bin/node Yarn: Not Found npm: 6.14.8 - /usr/local/bin/npm Browsers: Chrome: 86.0.4240.111 Firefox: Not Found Safari: 14.0 npmPackages: react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 react-scripts: 4.0.0-next.117 => 4.0.0-next.117 npmGlobalPackages: create-react-app: Not Found
Steps to reproduce
-
npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app
-
replace typescript 4.0.3 with 4.1.0-beta ( or ^4.1.0-beta ) in package.json
-
rm -rf node_modules package-lock.json && npm i
-
npm start
Expected behavior
Should work out of the box
Actual behavior
node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
appTsConfig.compilerOptions[option] = value;
^
TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
Reproducible demo
Steps are simple enough to build your own demo
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 118
- Comments: 117 (23 by maintainers)
Links to this issue
Commits related to this issue
- Temp fix for incompat issue with react-scripts 4.0.0 and TS See: https://github.com/facebook/create-react-app/issues/9429 https://github.com/facebook/create-react-app/issues/9868 — committed to jobsgowhere/jobsgowhere by SheldonCheng 4 years ago
- Init React Typescript app with CRA - hardcoded ts version because of CRA issue `facebook/create-react-app/issues/9868` — committed to alvyn279/react-patterns by alvyn279 4 years ago
- Patch react-scripts and change jsx typescript option The bug was introduced in the most recent create-react-app: https://github.com/facebook/create-react-app/issues/10109 The typescript version needs... — committed to JanBussieck/tiliter-file-picker by JanBussieck 4 years ago
- [FEATURE]create react app whith typescript template and fix issue > https://github.com/facebook/create-react-app/issues/9868#issuecomment-731579629 — committed to alfredarcifa/pokedis by Avalfr3d 4 years ago
- [FEATURE]create react app whith typescript template and fix issue > https://github.com/facebook/create-react-app/issues/9868#issuecomment-731579629 — committed to alfredarcifa/pokedis by Avalfr3d 4 years ago
- Setup barebones react client So, you have to delete the `.tsconfig` in the `client/` dir every time you restart. Apparently [this is fixed](https://github.com/facebook/create-react-app/issues/9868) b... — committed to gnfisher/typescript-express-react-experiment by gnfisher 4 years ago
- use versions that actually work (https://github.com/facebook/create-react-app/issues/9868) — committed to City-of-Helsinki/tilavarauspalvelu-ui by siren 4 years ago
- fix: error using jsx Message Error: Cannot use JSX unless '--jsx' flag is provided Issue: https://github.com/facebook/create-react-app/issues/9868 — committed to wijloc/github-explorer by wijloc 4 years ago
- fix https://github.com/facebook/create-react-app/issues/9868 — committed to rayyildiz/capture-tweet by rayyildiz 4 years ago
- chore: react-script 4.0.0 issue 해결을 위한 버전업 - tsconfig 최초 생성 시에만 스크립트가 작동하는 문제 - https://github.com/facebook/create-react-app/issues/9868 — committed to hwookim/react-todolist by hwookim 3 years ago
- fix https://github.com/facebook/create-react-app/issues/9868 — committed to rayyildiz/capture-tweet by rayyildiz 4 years ago
@iansu I found it!!
I started debugging
verifyTypSscriptSetup.js
First issue I found: (line 151)
It must be
ts.JsxEmit.ReactJSX
(capital letters) instead ofts.JsxEmit.ReactJsx
.Perfect example why people use TypeScript instead of plain old JS. 😏
That was working for me. You can also try deleting your tsconfig.json and it should automatically get recreated with the new settings.
@benneq just to be clear, you might want to update the title of this issue, I have verified:
I think this is a critical bug for anyone trying to migrate over.
Typescript 4 has now been broken for almost a month. When will this fix be released?
4.0.1 fixed the problem. if you are getting
Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'
andCannot use JSX unless the '--jsx' flag is provided
this is because vs code is using typescript 4.0.2 for intellisense. Change it to workspace version of typescript, the errors will be gone.Edit: typescript 4.0.2 doesn’t support
react-jsx
as a valid value. Workspace version is newer hence fixes that…I guess.Temporary workaround for me:
node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
238
to:} else if (parsedCompilerOptions[option] !== valueToCheck && option !== "jsx") {
First attempt:
^4.1.0-beta
Error:
Second try: deleting tsconfig.json before running
npm start
. Works! But why?Here’s the recreated tsconfig.json:
That looks exactly the same as the file I had before 😕
@iansu That doesn’t work.
I did the same steps as above, and put
"jsx": "react-jsx"
in tsconfig.json.I get the same error when running
npm start
Since, I don’t like to use beta versions, I used the following settings: Use an older typescript version (here
typescript 4.0.5
) withreact-scripts 4.0.0
, which fit together nicely.package.json
Now, you have to adjust
tsconfig.json
, because"jsx": "react-jsx"
is not available in this typescript version. If you don’t adjust tsconfig you will run into the following error:error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.
Use
"jsx": "react"
instead.If you’d like to use beta or dev versions, you could simply use a new typescript dev version:
Here’s how I solved this temporarily until
react-scripts@4.01
is released.verifyTypeScriptSetup.js
that contains the following.prestart
to yourscripts
inpackage.json
Now when you run
npm start
the errantverifyTypeScriptSetup.js
innode_modules
is patched.Note: This bypasses all of CRA’s checking for a valid
tsconfig.json
, so you better know what you’re doing. Also, be sure to remove this line AFTER you migrate toreact-scripts@4.01
.having the same problem, with TS 4.1.0-beta,
yarn build
works fine, butyarn start
gives meFix for me was to adjust the TS version within VS code.
It works for:
package.json
tsconfig.json
It works with “react-scripts”: “4.0.0-next.98”, and “typescript”: “^4.1.0”,
Hi!
The following versions worked for me. Without having to change anything else. I recommend deleting
node_modules
and alsoyarn.lock
first.confirmed updating to
4.0.1
fixed the problem.I was facing the same issue with newest TypeScript as well, for me the combination of
Lot of people seem to be affected. Wondering if this got the repo owner’s attention? Not sure if we are just talking amongst ourselves 😅
Can we please have a release with the fix? The Issue is marked as closed but still many people are reporting this problem.
I can confirm this is still an issue with react-scripts 4.0.0 stable and typescript 4.1.0 beta (using
npx create-react-app --template=typescript my-app
andyarn upgrade typescript@beta
). Note that stable versions of TypeScript don’t support the JSX transform yet, so this would break TS support for any JSX transform users.Perhaps it would be helpful to suggest TS users to wait to migrate, especially if they plan on using the JSX transform. Deleting
tsconfig.json
does seem to be a workaround though.As @strohm-a mentioned, updating VS Code’s TypeScript version fixed this issue for me. Instructions found here. My workspace wanted to use v4.1.2, but VS Code was using v4.0.3
might be worth mentioning this issue in the release/migration notes … i spent more time than i would like to admit on it before i saw this thread.
Reproducing and fixing in the following steps with Visual Studio Code.
Reproducing
From the terminal, enter
yarn create react-app my-app --template typescript
as explained in the create-react-app docs.Enter
cd my-app
thenyarn start
.Immediately get the following error:
Fixing
Go to the
verifyTypeScriptSetup.js
file innode_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js
Change line 151:
to
Run
yarn start
. Yay, running! 🎉Go to
App.tsx
. See an unholy amount of red. Oh no! 😮Make sure Visual Studio Code is using the latest version of TypeScript. While in
App.tsx
, click on the version of TypeScript displayed in the lower right of the IDE. (Mine says 4.0.3.) Select “Select TypeScript Version…” and select “Use Workspace Version” (which is pulled fromnode_modules
). More info on using the workspace version of TypeScript in Visual Studio Code.Ok, that looks better. But kill the app and run
yarn start
again. Ded. ☠️Add this to your
package.json
That’s right, we’re deleting
tsconfig.json
every time before start. And then on start, it is automatically recreated. 🤮 🤷If you need your
tsconfig.json
file, use donovan’s solution to wipe outverifyTypeScriptSetup.js
instead.Profit???
I’m using typescript: 4.1.2 and delete the tsconfig.json. I tried again the ‘yarn start’ and works!
@NearHuscarl Unfortunately this temporary fix only works if at the end of the day you are using the default TS config in your project. Our project brakes because we use
baseUrl: "./src"
, and we can’t hotfix it… 😦Comedy with solutions, just:
P.S. In any case, get a notification that your typescript version is not supported, but everything will work.
That worked for me, thanks !
it work fine. react-scripts: 4.0.0-next.98 and typescript-^4.1.0-beta 👍
The only success I’m having today is to start a brand new React app with
yarn create react-app ui --template typescript
. Then, deletingtsconfig.json
before each time I runyarn start
.And, for what it’s worth, copying my components and other source code from a different existing project into this new one works.
@otroboe You can set VSCode to use a newer version of TypeScript. Instructions are at https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions
Fixed in #9921.
Already done: https://github.com/facebook/create-react-app/pull/9869
Yes this issue is fixed I am using
"react-scripts": "^4.0.1"
and"typescript": "^4.1.3"
which are latest today.In some cases you may want to remove the
node_modules
directory and clean install.This doesn’t change anything as the new tsconfig created by react-scripts is doomed, too. I’d say it’s a blocker for any newcommer to the CRA and react developement in general.
For anyone else who winds up here - I have a slightly customized
tsconfig.json
(baseURL setting) and my typescript compiling broke when upgrading toreact-scripts 4.0
All my issues went away when I found a compatible version of
typescript
-4.0.3
(think all4.0.x
should work)I was on
typescript 3.7.x
which broke my tsc compilingtypescript 4.1.x
didn’t let me keep my custom config settings.I tried @Thiagoslds solution, and it only worked the first time. Every attempt after that gives the same error
Just tried to create a new project -
npx create-react-app my-app --template typescript
, and getting this error.This workaround worked for me - https://github.com/facebook/create-react-app/issues/9868#issuecomment-723576740
Here are versions: TypeScript:
4.0.5
Node:15.1.0
npm:7.0.8
Would be nice if the cmds work straight out of the box.
Better tests should be written, this has nothing to do with JavaScript. Relying on TypeScript for this stuff is what makes TypeScript dangerous to use.
You may want to use patch-package to persist this fix until it’s released.
I think I got it! (lines 173 to 194)
Guess who’s bad…
Again: Wouldn’t have happened with TypeScript code 😼
source: https://immerjs.github.io/immer/docs/freezing
I guess the author of these lines knows why he used immer and how to fix this 😄 Commit: https://github.com/facebook/create-react-app/commit/315ff4b4874806f0a9526f8ce79cd82bffc8bec6#diff-2f231dbdc363c929e899c94ae0d999f9886fdc6e33fb88d498a6b101a4bf9f68
@ianschmitz Your help would be appreciated
/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239 appTsConfig.compilerOptions[option] = value; ^
TypeError: Cannot assign to read only property ‘jsx’ of object ‘#<Object>’ at verifyTypeScriptSetup (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43) at Object.<anonymous> (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/start.js:31:1) at Module._compile (internal/modules/cjs/loader.js:1137:30) at Object.Module._extensions…js (internal/modules/cjs/loader.js:1157:10) at Module.load (internal/modules/cjs/loader.js:985:32) at Function.Module._load (internal/modules/cjs/loader.js:878:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) at internal/main/run_main_module.js:17:47 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! multi-step-form-typescript@0.1.0 start:
react-scripts start
npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the multi-step-form-typescript@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in: npm ERR! /home/ehsan/.npm/_logs/2020-11-22T18_20_20_546Z-debug.log
The above error I am getting after running yarn start
So what you need to do in order to get rid of this
on your terminal click on the error link
/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239 appTsConfig.compilerOptions[option] = value;
and then change the 239 line to
else if (parsedCompilerOptions[option] !== valueToCheck && option !== “jsx”)
Now after changing this goto tsconfig.json
and than replace “jsx”: “react-jsx” to “jsx”: “react”
now run your project with sudo yarn start
It’s work for me, hope this will work for you too 👍 💯
I fixed the issue forcing the typescript version to 4.0.5 and changing the “jsx” value from “react-jsx” to “react” in tsconfig.json file.
Same here, the
yarn start
is working withBut VSCode is complaining on the
"jsx": "react-jsx"
with the messageAnd inside components:
This worked for me!
@wilfredlopez This worked as well but then my IDE shows this error
“react-scripts”: “4.0.0” “typescript”: “4.0.3” works for me
I solve this error updating react-scripts to 4.0.3
yarn upgrade react-scripts@4.0.3
update to react-scripts 4.0.1 they fixed it, and it works now as far as I know
For anyone looking for a more reliable work around for the time being, that doesn’t consist on deleting the tsconfig file or manually changing the content of the faulty file every time dependencies are updated, here is what I did:
yarn add line-replace --dev
package.json
tonode path/to/file && react-scripts start
So your script should look something like this:
I tried using @romelgomez 's solution, however I was getting errors. I managed to solve it using a combination of @romelgomez and @149203 's solutions;
Essentially removing tsconfig upon every “npm start”. Thanks guys!
This is a workaround, it will clear the
tsconfig.json
before it runreact-scripts start
,One of the many reasons to move to yarn 2 is yarn patch
This really comes in handy to quickly and elegantly solve problems like this.
If you are a yarn 2 user (and if not you should be):
Below is the patch file you can use:
@PupoSDC Did you ever get this working with baseUrl set?
I’m getting the following issue when setting
isolatedModules
tofalse
in mytsconfig.json
:Someone should just open a new issue and reference that this issue should be re-opened
Using these versions did not work
and in tsconfig
still this error
Had to apply this patch.
patchCRA.js
Then run
Hi there,
With: “typescript”: “^4.1.2”, “react-scripts”: “4.0.0”, “react”: “^17.0.1”,
I have this same issue. When: I delete the tsconfig.json file and re-run “npm start”… 👌 but when: I stop and re-run “npm start”, without deleting the tsconfig.json file…👎
🤔 What’s the solution for not seeing the message
nowadays?
Best regards.
This PR purports to fix the bug: https://github.com/facebook/create-react-app/pull/9869 … but version
4.0.0-next.117
was last published a month ago. I’m not familiar enough with the CI tooling in this repo, but is there some way we can get a maintainer to kick off a build?@TroySchmidt Unfortunately not. I’ve decided to postpone upgrading to React 17, CRA 4, and TS 4 until this issue is in an official release.
you can delete tsconfig.json , npm run start . The project will create new tsconfig.json file .
That’s the problem. Thanks!
Changing node_modules content works up till “npm install” or “yarn install” command is issued (e.g. within a Dockerfile).
Is this a good solution?
This worked perfectly for me. Hopefully this gets patched sometime soon, I’m not using it for anything particularly important but I know many people do use it for pretty important stuff.
This sounds silly, but you can keep removing tsconfig.json and running
npm start
🤦♂️.@donavon, thank you that solves my problem.
This way it works but the scripts still crash when executing
npm run test
.Same problem. Is it mentioned somehow in the upgrade plan?
But maybe this causes other issues. I guess there’s reason why @ianschmitz introduced immer there.
True. But at least I can now restart my app without always deleting tsconfig.json
Btw: I doesn’t matter what you change. You don’t have to change anything at all. Just save the file as is, and you’ll get the error.
There is another similar issue with updating the TypeScript config file. We’re still trying to determine the root cause. In this particular case you can work around it by manually setting
jsx: react-jsx
in tsconfig.json.