TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

[aadityarajkumawat]

Describe the bug

When creating a react-typescript app using

npx create-react-app . --template typescript

The error:

yarn run v1.22.5
$ react-scripts start
/home/aditya/all/yt/twitter/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/aditya/all/yt/twitter/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/home/aditya/all/yt/twitter/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[roderik]

I have this happening after upgrading to typescript 4.1

[maltoze]

Duplicate with #9868

[convexhull]

Same issue I am facing. Just ran the npx create-react-app my-app --template typescript command.
When I run it using yarn start, I get this error.

[LiuJun0]

+1
Me too.

[n1ru4l]

Duplicate of #9868

[NathanScott85]

Definitely, a Duplicate of #9868 but also can confirm getting the following error: -

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (/Users/Nathan/Projects/pwa/pwa-react/pwa-react/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (/Users/Nathan/Projects/pwa/pwa-react/pwa-react/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47
error Command failed with exit code 1.

[grug]

+1 seeing this as well

[LenChang]

+1 Now i can't create new typescript anymore !!!

[ChristianIvicevic]

You can fix this issue for the time being by downgrading to Typescript 4.0.5. It is an issue with Typescript 4.1+ being present with CRA 4.0 and may be fixed once CRA 4.0.1 is released.

[dnepro]

I've just had this exact error, the problem is increate-react-app\packages\react-scripts\scripts\utils\verifyTypeScriptSetup.js on Line 151 (to find it search for ts.JsxEmit.ReactJ) it was using ts.JsxEmit.ReactJsx but should use ts.JsxEmit.ReactJSX (JSX being upper case)

Thanks to @benneq this is fixed in the master branch (already three weeks ago), just needs a new patch version (see the fix: #9869).
Can somebody release a 4.0.1?

[convexhull]

You can fix this issue for the time being by downgrading to Typescript 4.0.5. It is an issue with Typescript 4.1+ being present with CRA 4.0 and may be fixed once CRA 4.0.1 is released.

I tried that. Downgraded to TS 4.0.5 and replace "react-jsx" with "react" in the tsconfig.json jsx field.
But nothing seems to solve this.

[neonise]

please solve this . i have this error too.

[jaquinocode]

Personally, I was able to fix this issue (this is on a fresh project) by:
-changing the typescript version in package.json to "~4.0.5"
-changing the value "jsx" in compilerOptions inside tsconfig.json to "react" instead of "react-jsx"
-run npm install so that the older typescript version is installed
-I don't think this is needed but perhaps make sure vscode has the intellisense of ts set to the same or similar version to the one you've installed Mine is set to use the local one I just installed - 4.0.5
-I was then able to start the project normally with npm start

[bartlettpsj]

I just deleted tsconfig.json and ran yarn start, and it recreates it and runs (I did update to ts 4.0.5 too). But you have to delete everytime you run yarn start. i.e

rm tsconfig.json && yarn start

Hacky until we get a fix.

[wannymiarelli]

I just deleted tsconfig.json and ran yarn start, and it recreates it and runs (I did update to ts 4.0.5 too). But you have to delete everytime you run yarn start. i.e

rm tsconfig.json && yarn start

Hacky until we get a fix.

It works and the generated file is actually identical

[Earle-Poole]

For anyone also seeing this error.. it is already known, and a fix has been merged to master.

What we are waiting for now is a React-Scripts v4.0.1 patch on npm... no word yet on when that's happening.

The fix I am referencing: #9869

[matiasgdev]

I just deleted tsconfig.json and ran yarn start, and it recreates it and runs (I did update to ts 4.0.5 too). But you have to delete everytime you run yarn start. i.e

rm tsconfig.json && yarn start

Hacky until we get a fix.

Yooo. Thanks

[longbucks]

You could also comment out the line 239 in verifyTypeScriptSetup.js
if you do not want to remove your
Tsconfig file.
To find this file. You must go to node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js

[Earle-Poole]

You could also comment out the line 239 in verifyTypeScriptSetup.js
if you do not want to remove your
Tsconfig file.
To find this file. You must go to node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js

This is not a solution in any kind of production environment that uses a VCS that ignores the node_modules directory.

[dyangua]

Solution

Change typescript version in package.json
"typescript": "~4.0.5",

Change in tsconfig.json
"jsx": "react"

In the terminal

yarn install 
yarn start

[jamesg1]

A quick solution as mentioned above 👍

yarn add typescript@4.0.5
rm tsconfig.json
yarn start

[terite]

Workaround for those who want to use TypeScript 4.1 and create-react-app 4.0.0: set the environment variable DISABLE_NEW_JSX_TRANSFORM to true to avoid the buggy code in verifyTypeScriptSetup.js until 4.0.1 is released.

Also, "jsx" must be set to "react" in tsconfig.json

The scripts section of my package.json now looks like this:

    "start": "env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",
    "build": "env DISABLE_NEW_JSX_TRANSFORM=true react-scripts build",
    "test": "env DISABLE_NEW_JSX_TRANSFORM=true react-scripts test",
    "eject": "env DISABLE_NEW_JSX_TRANSFORM=true react-scripts eject"

[0261]

I solve this issue

"react-scripts": "4.0.0-next.98"
"typescript": "^4.1.2",

yarn start

[AveryTheDev]

I see this issue with my version of TypeScript at 4.0.3 @ianschmitz

[aadityarajkumawat]

It seems like its fixed now with TS 4.0.3 as well

[jimmy-ly]

Ran into this issue as well on 4.0.0 with TS 4.1.3, updating to 4.0.1 resolved it.

[RaoAkif]

Just One thing:
npm install typescript@4.0.5
&
Restart the server

[BuistvoPloti]

update cra to 4.0.1 or set ts version to like "~4.0.5"

[durrantm]

Personally, I was able to fix this issue (this is on a fresh project) by:
-changing the typescript version in package.json to "~4.0.5"
-changing the value "jsx" in compilerOptions inside tsconfig.json to "react" instead of "react-jsx"
-run npm install so that the older typescript version is installed
-I don't think this is needed but perhaps make sure vscode has the intellisense of ts set to the same or similar version to the one you've installed Mine is set to use the local one I just installed - 4.0.5
-I was then able to start the project normally with npm start

Worked for me. Jan 28th 2020 for existing create-react-app app from 3 months ago. I tried just changing react-jsx to react but that was not enough. YOu have to change the version too and npm install Make sure you use ~4.0.5 and not ^4.0.5 as only the former works!

[thanhsonng]

I solved this issue by upgrading react-scripts:

yarn upgrade react-scripts@latest

[niiloArction]

For me changing "react-scripts" version in package.json from "4.0.0" to "4.0.1" and running npm i fixed the error.

[iampeters]

Workaround for those who want to use TypeScript 4.1 and create-react-app 4.0.0: set the environment variable DISABLE_NEW_JSX_TRANSFORM to true to avoid the buggy code in verifyTypeScriptSetup.js until 4.0.1 is released.

Also, "jsx" must be set to "react" in tsconfig.json

The scripts section of my package.json now looks like this:

    "start": "env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",
    "build": "env DISABLE_NEW_JSX_TRANSFORM=true react-scripts build",
    "test": "env DISABLE_NEW_JSX_TRANSFORM=true react-scripts test",
    "eject": "env DISABLE_NEW_JSX_TRANSFORM=true react-scripts eject"

This solved it for me. thanks

[joaoromeira]

I solve this error updating react-scripts to 4.0.3

yarn upgrade react-scripts@4.0.3

[bseiryk]

even after fix i still was getting this issue and the root cause was that my tsconfig.json had "jsx": "react". After changing to "jsx": "react-jsx" error has gone.

[CauueSanttos]

Solution

Change typescript version in package.json "typescript": "~4.0.5",

Change in tsconfig.json "jsx": "react"

In the terminal

yarn install 
yarn start

[ChanHaiWei]

删除 tsconfig.json 文件，重新运行 npm start 项目能临时起来