create-react-app: Typescript 4.1: Cannot assign to read only property 'jsx' of object

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 40
Comments: 18

Most upvoted comments

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

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

+20

Hillshum on Nov 20, 2020

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

+15

fedellen on Nov 20, 2020

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.

rafaelcalhau on Nov 20, 2020

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

Quadriphobs1 on Dec 1, 2020

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”

miliscm on Dec 3, 2020

Facing the same issues with Typescript 4.0.3

brunoleitem on Nov 20, 2020

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

liaoyinglong on Nov 20, 2020