search

facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.58k stars 26.8k forks source link

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

Closed aadityarajkumawat closed 3 years ago

aadityarajkumawat commented 3 years ago

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 commented 3 years ago

I have this happening after upgrading to typescript 4.1

maltoze commented 3 years ago

Duplicate with https://github.com/facebook/create-react-app/issues/9868

convexhull commented 3 years ago

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 commented 3 years ago

+1 Me too.

n1ru4l commented 3 years ago

Duplicate of #9868

NathanScott85 commented 3 years ago

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 commented 3 years ago

+1 seeing this as well

LenChang commented 3 years ago

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

ChristianIvicevic commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

please solve this . i have this error too.

jaquinocode commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

A quick solution as mentioned above 👍 

yarn add typescript@4.0.5
rm tsconfig.json
yarn start
terite commented 3 years ago

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 commented 3 years ago

I solve this issue

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

yarn start

Osmon11 commented 3 years ago

++

ramonpaolo commented 3 years ago

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 commented 3 years ago 
"react-scripts": "4.0.0-next.98"

Thank you : )

ImAliMoussa commented 3 years ago

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

kbatavia12 commented 3 years ago

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!

masiucd commented 3 years ago

I just experienced the same issue

natlang commented 3 years ago

Specifying version 4.0.5 fixed this for me.

dragonJJ commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

student020341 commented 3 years ago

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 commented 3 years ago

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

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

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

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

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

luansens commented 3 years ago

Worked for me

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

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

I hope this helps.

madrus commented 3 years ago

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 commented 3 years ago

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

student020341 commented 3 years ago

@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 commented 3 years ago

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

chrismatgit commented 3 years ago

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

luansens commented 3 years ago

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

@ianschmitz after i did these steps mentioned here did worked fine

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.

hongguang-alt commented 3 years ago

I just use default tsconfig.json .

jarretmoses commented 3 years ago

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

AveryTheDev commented 3 years ago

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