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

Quadriphobs1 commented 4 years ago

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

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

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

alecpo commented 3 years ago

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

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

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

Facing the same issues with Typescript 4.0.3

marioweid commented 3 years ago

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

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

Facing same issue with TS 4.0.3

Alekseyideas commented 3 years ago

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

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

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

rafaelcalhau commented 3 years ago

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

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

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

miliscm commented 3 years ago

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

2020-12-03_15h25_13

miliscm commented 3 years ago

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

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.

tsconfig-diff

RaoAkif commented 3 years ago

Just One thing: npm install typescript@4.0.5 & Restart the server

facebook / create-react-app