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 typescript@4.0.5

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