TypeError: Cannot assign to read only property ‘jsx’ of object ‘#<Object>’

While creating a new react project with typescript by running the command:

npx create-react-app . --template typescript

I stumbled upon the following error:

Fix 2:

uninstall typescript and install typescript@4.0.5

npm uninstall typescript

Install typescript@4.0.5

npm install typescript@4.0.5

My package.json file:

For the wiggly lines, follow the step 4 inside fix 1.

Fix 1:

4.0.0 breaks with typescript (all versions) · Issue #9868 · facebook/create-react-app

Next,

npm start

If you’re getting this wiggly-red-lines under your html code inside the .tsx file after. Goto tsconfig.json file and replace “jsx”: “react-jsx” to “jsx”: “react”.

TLDR:

1. Delete the tsconfig.json file.
2. Run npm start.
3. (if getting the wiggly lines under you html code inside react-components.)
4. Goto tsconfig.json and replace “jsx”: “react-jsx” to “jsx”: “react”

For now, this seems like a temporary fix, every time you get this error, follow the given steps and if you have a better fix; let me know!