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.

[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!

[sonngdev]

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 项目能临时起来