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

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

+106

jaquinocode on Nov 20, 2020

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.

+100

bartlettpsj on Nov 20, 2020

I solve this issue

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

yarn start

+64

0261 on Nov 21, 2020

Solution

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

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

In the terminal

yarn install 
yarn start

+62

dyangua on Nov 22, 2020

A quick solution as mentioned above 👍

yarn add typescript@4.0.5
rm tsconfig.json
yarn start

+60

jamesg1 on Nov 21, 2020

+1 Me too.

+54

LiuJun0 on Nov 20, 2020

I have this happening after upgrading to typescript 4.1

+30

roderik on Nov 20, 2020

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.

+26

ChristianIvicevic on Nov 20, 2020

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

+26

LenChang on Nov 20, 2020

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"

+25

terite on Nov 21, 2020

+1 seeing this as well

+24

grug on Nov 20, 2020

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: https://github.com/facebook/create-react-app/pull/9869). Can somebody release a 4.0.1?

+23

dnepro on Nov 20, 2020

please solve this . i have this error too.

+15

neonise on Nov 20, 2020

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.

+12

convexhull on Nov 20, 2020

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.

+11

convexhull on Nov 20, 2020

I solved this issue by upgrading react-scripts:

yarn upgrade react-scripts@latest

+10

thanhsonng on Feb 14, 2021

++

+9

Osmon11 on Nov 21, 2020

You can add DISABLE_NEW_JSX_TRANSFORM=true to .env file. This way it’ll stop replacing react with react-jsx

+7

Dema on Nov 25, 2020

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: https://github.com/facebook/create-react-app/pull/9869

+5

Earle-Poole on Nov 20, 2020

I just experienced the same issue

+4

masiucd on Nov 22, 2020

Modified start script in package.json to this and it works for now. "start": "rm tsconfig.json && react-scripts start",

+4

ImAliMoussa on Nov 22, 2020

works for me with
{
    "react-scripts": "^4.0.1",
    "typescript": "^4.1.2",
}
Worked for me too - but when I run "npm run start"again, tsconfig.json keeps changing jsx from “react” to “react-jsx” which causes errors in my tsx files. Is there something else I need to change? Is this unrelated?

Have updated my initial post (see above)

+3

madrus on Nov 24, 2020

works for me with

{
    "react-scripts": "^4.0.1",
    "typescript": "^4.1.2",
}

Worked for me too - but when I run "npm run start"again, tsconfig.json keeps changing jsx from “react” to “react-jsx” which causes errors in my tsx files. Is there something else I need to change? Is this unrelated?

+3

student020341 on Nov 23, 2020

works for me with react-jsx in tsconfig.json, and

{
    "react-scripts": "^4.0.1",
    "typescript": "^4.1.2",
}

and

  "babel": {
    "presets": [
      [
        "@babel/preset-react",
        {
          "runtime": "automatic"
        }
      ]
    ]
  },

in my package.json and off course installed the preset: npm i -D @babel/preset-react as advised by the React team: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports

+3

madrus on Nov 24, 2020

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.

I too : (

+3

ramonpaolo on Nov 22, 2020

I solve this error updating react-scripts to 4.0.3

yarn upgrade react-scripts@4.0.3

+2

joaoromeira on Jul 16, 2021

Can anyone confirm if 4.0.1 resolves this issue? We did patch up some of the issues when modifying the tsconfig.

+2

ianschmitz on Nov 25, 2020

@maltoze @madrus @gynekolog

Thanks! I changed the typescript version vs code was using and that seems to have resolved the issue. It’s still react-jsx, but now it works. Everything set to 4.1.x now.

+2

student020341 on Nov 25, 2020

works for me with
{
    "react-scripts": "^4.0.1",
    "typescript": "^4.1.2",
}
Worked for me too - but when I run "npm run start"again, tsconfig.json keeps changing jsx from “react” to “react-jsx” which causes errors in my tsx files. Is there something else I need to change? Is this unrelated?

Update the typescript version of your IDE.

+2

maltoze on Nov 24, 2020

I modified the jsx property in tsconfig.json to “react” instead of “react-jsx” and changed the typescript version in the package.json file. When i ran yarn install , it prompted me to select a typescript version, I chose 4.0.2 and now it runs without any errors!

+2

kbatavia12 on Nov 22, 2020

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.

+2

Earle-Poole on Nov 21, 2020

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

+2

longbucks on Nov 21, 2020

@Luan-Sens @ianschmitz after upgrading to 4.0.1 I personally am not seeing this issue anymore.

+1

jarretmoses on Dec 1, 2020

Worked for me

Set Typescript of editor to use workspace version

ctrl | cmd + shift + p and type “Typescript” - select typescript version uses workspace

Upgrade react-scripts to latest

npm upgrade react-scripts@latest || yarn upgrade react-scripts@latest will go to version 4.0.1

Upgrade typescript to latest (same command of above but targeted typescript package)
Set “jsx” to “react-jsx” in tsconfig.json

I hope this helps.

+1

luansens on Nov 24, 2020

This issue is fixed now. No error with latest versions of react-scripts and typescript.

+1

cseas on Nov 23, 2020

create-react-app: TypeError: Cannot assign to read only property 'jsx' of object '#

Describe the bug

About this issue

Commits related to this issue

Most upvoted comments