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

[parvizwpf]

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: https://github.com/facebook/create-react-app/pull/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 [email protected]
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

[Osmon11]

++

[ramonpaolo]

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 : (

[ramonpaolo]

"react-scripts": "4.0.0-next.98"

Thank you : )

[ImAliMoussa]

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

[kbatavia12]

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!

[masiuciszek]

I just experienced the same issue

[natlang]

Specifying version 4.0.5 fixed this for me.

[dragonJJ]

Solution

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

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

In the terminal

yarn install 
yarn start

it doesn't work

[farshidshahmoradi1996]

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 fine .

[madrus]

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

[cseas]

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

[student020341]

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?

[dragonJJ]

I also find the bug,and I use 'react' to replace 'react-jsx' after run 'npm start' by myself...

------------------ 原始邮件 ------------------
发件人: "student020341"<[email protected]>;
发送时间: 2020年11月24日(星期二) 凌晨5:46
收件人: "facebook/create-react-app"<[email protected]>;
抄送: "七仔"<[email protected]>; "Comment"<[email protected]>;
主题: Re: [facebook/create-react-app] TypeError: Cannot assign to read only property 'jsx' of object '#

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?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[maltoze]

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.

[jamsch]

This seems to have resurfaced in 4.0.1. appTsConfig is assigned to readTsConfig (which is a frozen object), so the following errors out.

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js#L222-#L228

[gynekolog]

@student020341

causes errors in my tsx files

react-jsx is correct.
Can you build your app and errors are only at your IDE? As @maltoze said, set your IDE to use the typescript version from the app node_modules folder.

I wrote a short blog post on how to do it for IntelliJ IDE.

[dragonJJ]

Yes,it works,I can run my app normaly...

------------------ 原始邮件 ------------------
发件人: "Honza"<[email protected]>;
发送时间: 2020年11月24日(星期二) 下午4:49
收件人: "facebook/create-react-app"<[email protected]>;
抄送: "七仔"<[email protected]>; "Comment"<[email protected]>;
主题: Re: [facebook/create-react-app] TypeError: Cannot assign to read only property 'jsx' of object '#

@student020341

causes errors in my tsx files

react-jsx is correct.
Can you build your app and errors are only at your IDE? As @maltoze said, set your IDE to use the typescript version from the app node_modules folder.

I wrote a short blog post on how to do it for IntelliJ IDE.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[Luan-Sens]

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.

[madrus]

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)

[Dema]

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

[student020341]

@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.

[ianschmitz]

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

[chrismatgit]

All the solution above doesn't work for me after downgrading typescript today.