Typescript 4.1: Cannot assign to read only property 'jsx' of object

[Quadriphobs1]

Describe the bug

Upgrading to typescript 4.1 which apparently introduced React 17 JSX Factories causes the error Cannot assign to read only property 'jsx' of object when using .tsx file.

Did you try recovering your dependencies?

Yes

Environment

Environment Info:

  current version of create-react-app: 4.0.0

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
  Binaries:
    Node: 15.0.1 - ~/.nvm/versions/node/v15.0.1/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 7.0.3 - ~/.nvm/versions/node/v15.0.1/bin/npm
  Browsers:
    Chrome: 87.0.4280.67
    Edge: Not Found
    Firefox: 82.0.3
    Safari: 14.0
  npmPackages:
    react: ^17.0.1 => 17.0.1 (16.14.0)
    react-dom: ^17.0.1 => 17.0.1 (16.14.0)
    react-scripts: ^4.0.0 => 4.0.0 

Steps to reproduce

Upgrade to typescript 4.1.2 using tsx files causes the error

Actual behavior

Reproducible demo

[Hillshum]

Also reproducible in a brand-new project created with --template typescript

https://github.com/Hillshum/jsx-readonly

[alecpo]

Facing same issue :/
I was just trying the new JSX Transform but seems that while trying in a TS template this error just pops up

[fedellen]

also stumbled across this issue --

after rolling back typescript and changing jsx to react in tsconfig I was able to get 'npm start' to work.

npm install [email protected]

tsconfig.json:
"jsx": "react"

probably not a long lasting workaround though

[liaoyinglong]

use react-app-rewired and customize-cra
in config-overrides.js add

const immer = require('react-dev-utils/immer');
immer.setAutoFreeze(false);

to disable immer auto freeze maybe work

[brunoleitem]

Facing the same issues with Typescript 4.0.3

[marioweid]

I had the same issue with : npx create-react-app my-app --template typescript
like @fedellen said, downgrading typescript to 4.0.5 worked for me

[HugoMcPhee]

Here's a patch to temporarily get around the issue

(or go to node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js , comment out line 239, and run patch-package react-scripts)

diff --git a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
index 00139ee..5092ec7 100644
--- a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
+++ b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
@@ -236,7 +236,7 @@ function verifyTypeScriptSetup() {
         );
       }
     } else if (parsedCompilerOptions[option] !== valueToCheck) {
-      appTsConfig.compilerOptions[option] = value;
+      // appTsConfig.compilerOptions[option] = value;
       messages.push(
         `${coloredOption} ${chalk.bold(
           valueToCheck == null ? 'must not' : 'must'

[convexhull]

Facing same issue with TS 4.0.3

[Alekseyideas]

Downgrading Typescript version helped me. And in tsconfig.json change "react-jsx" to "react". It seems that after a while it will be fixed

[convexhull]

Downgrading Typescript version helped me. And in tsconfig.json change "react-jsx" to "react". It seems that after a while it will be fixed

Hey @Alekseyideas , to which version did you downgrade it to?
Without downgrading, I tried replacing "react-jsx" to "react". But that didn't work.

[Alekseyideas]

Hi @convexhull, downgrade to "4.0.5", after downgrade reinstall node-modules

[rafaelcalhau]

Hello guys, after installing using:
yarn create react-app my-app --template typescript

In the package.json, we have "typescript": "^4.0.3",

• I just removed the ^ from version
• deleted node_modules and install everything again

In the tsconfig.json, just change the param "jsx" from "react-jsx" to "react" and it worked.

[cezarmezzalira]

Hey guys! I Found a thread on reddit, and I discovered the problem in my case is the version of typescript used in my Code Editor (VSCode).

Try this solution here: https://www.reddit.com/r/react/comments/k0bw7y/compileroptionsjsx_must_be_reactjsx_to_support/gdh4pyb?utm_source=share&utm_medium=web2x&context=3

[Quadriphobs1]

This seems to be working if you upgrade to "react-scripts": "^4.0.1", and typescript "typescript": "4.1.2"

[miliscm]

I did this, I installed a new version Typescript 4.1.2, but it didn't work.

[miliscm]

I did this, I installed a new version of Typescript 4.1.2, but it didn't work.

I got fixed!
I did this:

yarn add [email protected]
rm tsconfig.json
yarn start

Next step was to open tsconfig.json file and to change from "jsx": "react-jsx" to "jsx": "preserve"

[Chris-ScoutCorps]

I fixed it with the following change:

As was previously mentioned, deleting your tsconfig and letting it auto-create a default one also fixes the issue. If you're like me, though, you may have been alarmed for a second that you can only use the default config, with the workaround breaking your base path for absolute imports. (not so - phew!)

Specifically, the setting I had that was breaking post-upgrade was compileOnSave, which is no longer necessary to specify.

[RaoAkif]

Just One thing:
npm install [email protected]
&
Restart the server