Create-react-app: 4.0.0 breaks with typescript (all versions)

[benneq]

Describe the bug

I made a clean install of cra@next with typescript and then upgraded typescript to 4.1.0-beta ( also tested 4.1.0-dev.20201023 )

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

$$$ then replaced typescript 4.0.3 with 4.1.0-beta ( or ^4.1.0-beta ) in package.json

rm -rf node_modules package-lock.json && npm i

npm start

Error message:

node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

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

( EDIT: This doesn't happen with cra 4.0.0-next.98 )

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

I just looked for typescript bugs reported and closed in the last few days

Environment

System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
Binaries:
Node: 14.14.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.8 - /usr/local/bin/npm
Browsers:
Chrome: 86.0.4240.111
Firefox: Not Found
Safari: 14.0
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.0-next.117 => 4.0.0-next.117
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

2. replace typescript 4.0.3 with 4.1.0-beta ( or ^4.1.0-beta ) in package.json

3. rm -rf node_modules package-lock.json && npm i

4. npm start

Expected behavior

Should work out of the box

Actual behavior

node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

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

Reproducible demo

Steps are simple enough to build your own demo

[iansu]

There is another similar issue with updating the TypeScript config file. We're still trying to determine the root cause. In this particular case you can work around it by manually setting jsx: react-jsx in tsconfig.json.

[benneq]

@iansu That doesn't work.

I did the same steps as above, and put "jsx": "react-jsx" in tsconfig.json.

I get the same error when running npm start

[iansu]

That was working for me. You can also try deleting your tsconfig.json and it should automatically get recreated with the new settings.

[benneq]

First attempt:

1. npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app
2. edit package.json: set "typescript" version to ^4.1.0-beta
3. edit tsconfig.json: set "jsx" to "react-jsx"
4. rm -rf node_modules package-lock.json && npm i
5. npm start

Error:

node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

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

Second try: deleting tsconfig.json before running npm start. Works! But why?

Here's the recreated tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

That looks exactly the same as the file I had before 😕

[iansu]

I don't know why just changing that value wasn't working for you. This is an annoying bug that we're hoping to have fixed soon.

[benneq]

@iansu I found it!!

I started debugging verifyTypSscriptSetup.js

First issue I found: (line 151)

    jsx: {
      parsedValue:
        hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta')
          ? ts.JsxEmit.ReactJsx
          : ts.JsxEmit.React,

It must be ts.JsxEmit.ReactJSX (capital letters) instead of ts.JsxEmit.ReactJsx.

Perfect example why people use TypeScript instead of plain old JS. 😏

[iansu]

You're right about the capitalization but I don't know if that's the root issue. For example, if you change moduleResolution to classic you'll get the same error and that definitely used to work.

[iansu]

If you'd like to submit a PR to fix that casing issue that would be appreciated.

[benneq]

Already done: https://github.com/facebook/create-react-app/pull/9869

[benneq]

For example, if you change moduleResolution to classic you'll get the same error and that definitely used to work.

True. But at least I can now restart my app without always deleting tsconfig.json

Btw: I doesn't matter what you change. You don't have to change anything at all. Just save the file as is, and you'll get the error.

[benneq]

More Information:

Object.isFrozen(appTsConfig) // false
Object.isFrozen(appTsConfig.compilerOptions) // true
Object.isFrozen(appTsConfig.compilerOptions[option]) // true

That would explain why the property isn't writable.

How about a simple workaround that creates a new object instead of modifying the parsed data?

[benneq]

I think I got it! (lines 173 to 194)

    const { config: readTsConfig, error } = ts.readConfigFile(
      paths.appTsConfig,
      ts.sys.readFile
    );

    console.log(Object.isFrozen(readTsConfig.compilerOptions)); // false

    appTsConfig = readTsConfig;

    parsedTsConfig = immer(readTsConfig, config => {
      result = ts.parseJsonConfigFileContent(
        config,
        ts.sys,
        path.dirname(paths.appTsConfig)
      );
    });

    console.log(Object.isFrozen(readTsConfig.compilerOptions)); // true

Guess who's bad...

Again: Wouldn't have happened with TypeScript code 😼

Immer automatically freezes any state trees that are modified using produce.

source: https://immerjs.github.io/immer/docs/freezing

I guess the author of these lines knows why he used immer and how to fix this 😄 Commit: https://github.com/facebook/create-react-app/commit/315ff4b4874806f0a9526f8ce79cd82bffc8bec6#diff-2f231dbdc363c929e899c94ae0d999f9886fdc6e33fb88d498a6b101a4bf9f68

@ianschmitz Your help would be appreciated

[jamesmfriedman]

I have come across the same issue, I triaged it the exact same way all the way down to immer.

I think the easiest solution here is to just not use immer... It's creating an immutable data structure, but then following code attempts to mutate it 🤷‍♂️.

[jamesmfriedman]

This resolves the issue, although removes the reason to use immer... Plop this at the top of the file.

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

[benneq]

But maybe this causes other issues. I guess there's reason why @ianschmitz introduced immer there.

[jamesmfriedman]

@benneq just to be clear, you might want to update the title of this issue, I have verified:

• This breaks with ANY version of TS
• This happens anytime one of your local config params doesn't exactly match what create-react-app spits out by default.
• Simple repro, just set "paths" to anything, and watch it fail.
• Another repro, as you have stated, try setting "jsx": to "react-jsx"

I think this is a critical bug for anyone trying to migrate over.

[NearHuscarl]

See my answer here for a temporary fix. Also kinda related to #9429.

[PupoSDC]

@NearHuscarl Unfortunately this temporary fix only works if at the end of the day you are using the default TS config in your project. Our project brakes because we use baseUrl: "./src", and we can't hotfix it... :(

[DenysVuika]

having the same problem, with TS 4.1.0-beta, yarn build works fine, but yarn start gives me

node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

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

[ievgennaida]

Same problem.
Is it mentioned somehow in the upgrade plan?

[cdaz5]

might be worth mentioning this issue in the release/migration notes .. i spent more time than i would like to admit on it before i saw this thread.

[nickmccurdy]

I can confirm this is still an issue with react-scripts 4.0.0 stable and typescript 4.1.0 beta (using npx create-react-app --template=typescript my-app and yarn upgrade typescript@beta). Note that stable versions of TypeScript don't support the JSX transform yet, so this would break TS support for any JSX transform users.

Perhaps it would be helpful to suggest TS users to wait to migrate, especially if they plan on using the JSX transform. Deleting tsconfig.json does seem to be a workaround though.

[ianschmitz]

Fixed in #9921.

[tudor07]

Temporary workaround for me:

1. Go to node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
2. Change line 238 to: } else if (parsedCompilerOptions[option] !== valueToCheck && option !== "jsx") {

[nickmccurdy]

You may want to use patch-package to persist this fix until it's released.

[gperdomor]

I have a similar issue with paths property

[benneq]

@gperdomor This issue affects everything inside tsconfig.json

Still waiting for the next release of CRA

[tskj]

Typescript 4 has now been broken for almost a month. When will this fix be released?

[basickarl]

@iansu I found it!!

I started debugging verifyTypSscriptSetup.js

First issue I found: (line 151)

    jsx: {
      parsedValue:
        hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta')
          ? ts.JsxEmit.ReactJsx
          : ts.JsxEmit.React,

It must be ts.JsxEmit.ReactJSX (capital letters) instead of ts.JsxEmit.ReactJsx.

Perfect example why people use TypeScript instead of plain old JS.

Better tests should be written, this has nothing to do with JavaScript. Relying on TypeScript for this stuff is what makes TypeScript dangerous to use.

[basickarl]

I'm getting the following issue when setting isolatedModules to false in my tsconfig.json:

/home/karl/dev/afry/tmr-client/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:241
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'isolatedModules' of object '#<Object>'
    at verifyTypeScriptSetup (/home/karl/dev/afry/tmr-client/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:241:43)
    at Object.<anonymous> (/home/karl/dev/afry/tmr-client/node_modules/react-scripts/scripts/start.js:31:1)

[TroySchmidt]

@PupoSDC Did you ever get this working with baseUrl set?

[scorpion35]

Just tried to create a new project - npx create-react-app my-app --template typescript, and getting this error.

This workaround worked for me - https://github.com/facebook/create-react-app/issues/9868#issuecomment-723576740

Here are versions:
TypeScript: 4.0.5
Node: 15.1.0
npm: 7.0.8

Would be nice if the cmds work straight out of the box.

[tinacious]

I still get this error. I downgraded react-scripts to 3.4.1 and changed "jsx": "react-jsx" to "jsx": "react" and now it works.

• Node v14.15.1
• NPM 6.14.8
• TypeScript 4.1.2
• react-scripts 3.4.1

Here's my tsconfig.json for anyone running across this problem:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

[JakeZT]

It works with "react-scripts": "4.0.0-next.98", and "typescript": "^4.1.0",

[geekyarthurs]

still facing.

[PupoSDC]

@TroySchmidt Unfortunately not. I've decided to postpone upgrading to React 17, CRA 4, and TS 4 until this issue is in an official release.

[mgansler]

I was facing the same issue with newest TypeScript as well, for me the combination of

• react-scripts: 4.0.0
• typescript: 4.0.5
  works.

[JustalK]

I have the same problem.

From my package.json :

    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "ts-loader": "^8.0.11",
    "typescript": "^4.1.2",

My tsconfig is :

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noImplicitAny": false
  },
  "include": [
    "src",
    "src/custom.d.ts"
  ]
}

It works well if I use npm start or npm run build. However the npm run test crash with this error.
By looking at the code, the error is here line 242 of verifyTypeScriptSetup.js:

    } else if (parsedCompilerOptions[option] !== valueToCheck) {
      appTsConfig.compilerOptions[option] = value;

For a reason I ignore appTsConfig.compilerOptions is read only. i try to play a little bit with it but cannot find the source of the problem

Anw, I got ride of the problem with the same as @mgansler : https://github.com/facebook/create-react-app/issues/9868#issuecomment-731051541

I came back to version 4.0.5 for typescript and it works fine ;) <3

[cunguyendev]

It works with "react-scripts": "4.0.0-next.98", and "typescript": "^4.1.0",

This way it works but the scripts still crash when executing npm run test.

[HeroBanana]

I found out that typescript is formatting JSX value to a number which means it is using a list or something. https://www.typescriptlang.org/docs/handbook/jsx.html

react-jsx = 4

So basically the check in the source code is not going to work, not sure if it is fixed yet in the beta of react-scripts.

[mkhoussid]

.patch file:

diff --git a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
index 00139ee..13d9965 100644
--- a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
+++ b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
@@ -184,14 +184,13 @@ function verifyTypeScriptSetup() {
     // Get TS to parse and resolve any "extends"
     // Calling this function also mutates the tsconfig above,
     // adding in "include" and "exclude", but the compilerOptions remain untouched
-    let result;
-    parsedTsConfig = immer(readTsConfig, config => {
-      result = ts.parseJsonConfigFileContent(
-        config,
-        ts.sys,
-        path.dirname(paths.appTsConfig)
-      );
-    });
+    parsedTsConfig = {...readTsConfig};
+
+    const result = ts.parseJsonConfigFileContent(
+      parsedTsConfig,
+      ts.sys,
+      path.dirname(paths.appTsConfig)
+    );

     if (result.errors && result.errors.length) {
       throw new Error(
@@ -235,7 +234,7 @@ function verifyTypeScriptSetup() {
           )} value: ${chalk.cyan.bold(suggested)} (this can be changed)`
         );
       }
-    } else if (parsedCompilerOptions[option] !== valueToCheck) {
+    } else if (parsedCompilerOptions[option] !== valueToCheck && option !== "jsx") {
       appTsConfig.compilerOptions[option] = value;
       messages.push(
         `${coloredOption} ${chalk.bold(

[Thiagoslds]

I'm using typescript: 4.1.2 and delete the tsconfig.json. I tried again the 'yarn start' and works!

[thomasjedstrom]

@TroySchmidt asked @PupoSDC yesterday if he'd gotten it to work when including the baseUrl override, but just checking, has _anyone_ gotten it to work outside of only using default tsconfig values? Specifically when using the baseUrl?

[asecher]

@Thiagoslds solution worked for me

In the typescript template the typescript version is set to ^4.0.3 and the jsx transform "react-jsx" in typescript is available after 4.1 https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/#jsx-factories

[zaneclaes]

This PR purports to fix the bug: https://github.com/facebook/create-react-app/pull/9869
... but version 4.0.0-next.117 was last published a month ago.
I'm not familiar enough with the CI tooling in this repo, but is there some way we can get a maintainer to kick off a build?

[gvanderclay]

I tried @Thiagoslds solution, and it only worked the first time. Every attempt after that gives the same error

[teyfik-on-it]

What is the quickest solution to overcome this?

[rusher2004]

The only success I'm having today is to start a brand new React app with yarn create react-app ui --template typescript. Then, deleting tsconfig.json before _each_ time I run yarn start.

And, for what it's worth, copying my components and other source code from a different existing project into this new one works.

[zaneclaes]

Version 4.0.0-next.98 does indeed at least start with Typescript 4.1.2.

Short of that, manually patching the script within node_modules also works, per this comment.

However, the patch in the PR that was supposed to fix this issue does not work for me.

[MadaShindeInai]

"react-scripts": "4.0.0"
"typescript": "4.0.3"
works for me

[abelardolg]

Hi there,

With:
"typescript": "^4.1.2",
"react-scripts": "4.0.0",
"react": "^17.0.1",

I have this same issue.
When:
I delete the tsconfig.json file and re-run "npm start"... 👌
but when:
I stop and re-run "npm start", without deleting the tsconfig.json file...👎

🤔 What's the solution for not seeing the message

/home/skull/dev/udemy/react/react_socket_io/03-bandnames/bandnames-client/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

nowadays?

Best regards.

[wilfredlopez]

Had to apply this patch.

patchCRA.js

const path = require('path')
const fs = require('fs')

const filename = 'verifyTypeScriptSetup.js'
const filename2 = 'verifyTypeScriptSetup2.js'
const rootFilePath = path.join(
  __dirname,
  'node_modules',
  'react-scripts',
  'scripts',
  'utils'
)

const getPath = file => path.join(rootFilePath, file)

const textToReplace = 'else if (parsedCompilerOptions[option] !== valueToCheck)'
const replaceWith =
  'else if (parsedCompilerOptions[option] !== valueToCheck && option !== "jsx")'

const value = fs.readFileSync(getPath(filename), { encoding: 'utf-8' })

//Make Copy
fs.writeFileSync(getPath(filename2), value, { encoding: 'utf-8' })

//Update and Repalce
const updated = value.replace(textToReplace, replaceWith)
fs.writeFileSync(getPath(filename), updated, { encoding: 'utf-8' })

Then run

node patchCRA.js

[guilhermecapitao]

Hi!

The following versions worked for me. Without having to change anything else.
I recommend deleting node_modules and also yarn.lock first.

"react-scripts": "4.0.0-next.98",
"typescript": "4.1.0",

[drmzio]

Hi!

The following versions worked for me. Without having to change anything else.
I recommend deleting node_modules and also yarn.lock first.

"react-scripts": "4.0.0-next.98",
"typescript": "4.1.0",

This worked for me!

@wilfredlopez This worked as well but then my IDE shows this error

[otroboe]

Same here, the yarn start is working with

    "react-scripts": "4.0.0",
    "typescript": "4.1.2"

But VSCode is complaining on the "jsx": "react-jsx" with the message

Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'

And inside components:

Cannot use JSX unless the '--jsx' flag is provided.

[guilhermecapitao]

@drmzio @otroboe

I had this while trying to solve it by changing the versions, and when I deleted the node_modules folder and yarn.lock before running yarn to download the new version's dependencies it didn't happen anymore.

I don't know in practice what it affects, but when I changed from "react-jsx" to "react" I had no difference in my project and solved this error. But again, I don't understand the impact of this change according to the documentation and that was not necessary when I deleted the items mentioned at the beginning.

https://www.typescriptlang.org/tsconfig#jsx

[otroboe]

When I put back the "jsx": "react", my yarn start is not working anymore, and indeed, I don't have the VSCode complaining.

But when I remove node_modules/, yarn.lock and tsconfig.json, I expect everything is working well everywhere when I yarn and yarn start :)

[strohm-a]

@otroboe You can set VSCode to use a newer version of TypeScript. Instructions are at https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions

[donavon]

Here's how I solved this temporarily until [email protected] is released.

1. Place a file in your package root called verifyTypeScriptSetup.js that contains the following.
   js "use strict"; function verifyTypeScriptSetup() {} module.exports = verifyTypeScriptSetup;
2. Add the following prestart to your scripts in package.json
"prestart": "cp verifyTypeScriptSetup.js node_modules/react-scripts/scripts/utils",
3. Enjoy.

Now when you run npm start the errant verifyTypeScriptSetup.js in node_modules is patched.

Note: This bypasses all of CRA's checking for a valid tsconfig.json, so you better know what you're doing. Also, be sure to remove this line AFTER you migrate to [email protected].

[donavon]

I've also documented my journey to upgrade to TypeScript 4.1.2, React 17.x, and CRA 4.x in a tweet thread.

[francisu]

One of the many reasons to move to yarn 2 is yarn patch

This really comes in handy to quickly and elegantly solve problems like this.

If you are a yarn 2 user (and if not you should be):

1. Put the contents below in a file: react-scripts-patch.diff
2. Make the dependency on react-scripts look like:

    "react-scripts": "patch:[email protected]#path/to/react-scripts-patch.diff",

1. Do a yarn install

Below is the patch file you can use:

diff --git a/scripts/utils/verifyTypeScriptSetup.js b/scripts/utils/verifyTypeScriptSetup.js
index 00139ee4caf6e8499bb53bf31afe9bf94e557a1c..13d996544ecedbc8462a4cb0beb0b592f8e2e36c 100644
--- a/scripts/utils/verifyTypeScriptSetup.js
+++ b/scripts/utils/verifyTypeScriptSetup.js
@@ -184,14 +184,13 @@ function verifyTypeScriptSetup() {
     // Get TS to parse and resolve any "extends"
     // Calling this function also mutates the tsconfig above,
     // adding in "include" and "exclude", but the compilerOptions remain untouched
-    let result;
-    parsedTsConfig = immer(readTsConfig, config => {
-      result = ts.parseJsonConfigFileContent(
-        config,
-        ts.sys,
-        path.dirname(paths.appTsConfig)
-      );
-    });
+    parsedTsConfig = {...readTsConfig};
+
+    const result = ts.parseJsonConfigFileContent(
+      parsedTsConfig,
+      ts.sys,
+      path.dirname(paths.appTsConfig)
+    );

     if (result.errors && result.errors.length) {
       throw new Error(
@@ -235,7 +234,7 @@ function verifyTypeScriptSetup() {
           )} value: ${chalk.cyan.bold(suggested)} (this can be changed)`
         );
       }
-    } else if (parsedCompilerOptions[option] !== valueToCheck) {
+    } else if (parsedCompilerOptions[option] !== valueToCheck && option !== "jsx") {
       appTsConfig.compilerOptions[option] = value;
       messages.push(
         `${coloredOption} ${chalk.bold(

[HashemKhalifa]

@donavon, thank you that solves my problem.

[Kaschman]

For anyone else who winds up here - I have a slightly customized tsconfig.json (baseURL setting) and my typescript compiling broke when upgrading to react-scripts 4.0

All my issues went away when I found a compatible version of typescript - 4.0.3 (think all 4.0.x should work)

I was on typescript 3.7.x which broke my tsc compiling

typescript 4.1.x didn't let me keep my custom config settings.

[cr4z]

That was working for me. You can also try deleting your tsconfig.json and it should automatically get recreated with the new settings.

I've tried a lot of things in the past hour, and this is the only thing that worked. Yes, it creates the EXACT file, but something else must happen because as I said, it works. Thank you!

UPDATE: It worked once. ONCE. How does that even happen?

[zkhalapyan]

UPDATE: It worked once. ONCE. How does that even happen?

This sounds silly, but you can keep removing tsconfig.json and running npm start 🤦‍♂️.

[149203]

Reproducing and fixing in the following steps with Visual Studio Code.

Reproducing

1. From the terminal, enter yarn create react-app my-app --template typescript as explained in the create-react-app docs.

2. Enter cd my-app then yarn start.

3. Immediately get the following error:

C:\Code\my-app\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:239    
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (C:\Code\my-app\node_modules\react-scripts\scripts\utils\ve
rifyTypeScriptSetup.js:239:43)                                                                  at Object.<anonymous> (C:\Code\my-app\node_modules\react-scripts\scripts\start.js:31
:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Fixing

1. Go to the verifyTypeScriptSetup.js file in node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js

2. Change line 151:

 ? ts.JsxEmit.ReactJsx

to

 ? ts.JsxEmit.ReactJSX

1. Run yarn start. Yay, running! 🎉

2. Go to App.tsx. See an unholy amount of red. Oh no! 😮

3. Make sure Visual Studio Code is using the latest version of TypeScript. While in App.tsx, click on the version of TypeScript displayed in the lower right of the IDE. (Mine says 4.0.3.) Select "Select TypeScript Version..." and select "Use Workspace Version" (which is pulled from node_modules). More info on using the workspace version of TypeScript in Visual Studio Code.

4. Ok, that looks better. But kill the app and run yarn start again. Ded. ☠️

5. Add this to your package.json

"prestart": "rm -rf tsconfig.json",

1. That's right, we're deleting tsconfig.json every time before start. And then on start, it is automatically recreated. 🤮 🤷

2. If you need your tsconfig.json file, use donovan's solution to wipe out verifyTypeScriptSetup.js instead.

3. Profit???

[aTmb405]

As @strohm-a mentioned, updating VS Code's TypeScript version fixed this issue for me. Instructions found here. My workspace wanted to use v4.1.2, but VS Code was using v4.0.3

[brunubarbosa]

tks @strohm-a it worked for me!

[cipriandraghici93]

I fixed the issue forcing the typescript version to 4.0.5 and changing the "jsx" value from "react-jsx" to "react" in tsconfig.json file.

[vincer0]

@cipriandraghici93 solution worked for me, thanks!

[saadusufzai]

The only success I'm having today is to start a brand new React app with yarn create react-app ui --template typescript. Then, deleting tsconfig.json before _each_ time I run yarn start.

And, for what it's worth, copying my components and other source code from a different existing project into this new one works.

Worked for me

[paschini]

Still happening in 4.1.2, @jamesmfriedman solution worked for me

[PachVerb]

it work fine. react-scripts: 4.0.0-next.98 and typescript-^4.1.0-beta 👍

[ccarcaci]

Same problem, this solution works: https://github.com/facebook/create-react-app/issues/9868#issuecomment-715418383

Waiting for fix in [email protected]

[VirtualFox0]

Since, I don't like to use beta versions, I used the following settings:
Use an older typescript version (here typescript 4.0.5) with react-scripts 4.0.0, which fit together nicely.

package.json

"react-scripts": "4.0.0",
"typescript": "4.0.5",

Now, you have to adjust tsconfig.json, because "jsx": "react-jsx" is not available in this typescript version. If you don't adjust tsconfig you will run into the following error:
error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.

Use "jsx": "react" instead.

If you'd like to use beta or dev versions, you could simply use a new typescript dev version:

"react-scripts": "4.0.0",
"typescript": "4.2.0-dev.20201121",

[juliankleine]

Using these versions did not work

"react-scripts": "^4.0.0-next.117",
"typescript": "^4.2.0-dev.20201121"

and in tsconfig

"jsx": "react-jsx"

still this error

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

[romelgomez]

This is a workaround, it will clear the tsconfig.json before it run react-scripts start,

    "start": "echo '{}' > tsconfig.json && react-scripts start",

[Magam9]

I solved this issue by commenting out line 239 in verifyTypeScriptSetup.js. The problem is that the launch of scripts, it tried to forcibly rewrite the value of "jsx" property to "react-jsx". So far I did it in a test project and I'm not sure that this is the best solution.

my tsconfig

[scorpion35]

Lot of people seem to be affected. Wondering if this got the repo owner's attention? Not sure if we are just talking amongst ourselves 😅

[1nfinity-5starZ]

I fixed the issue forcing the typescript version to 4.0.5 and changing the "jsx" value from "react-jsx" to "react" in tsconfig.json file.

That worked for me, thanks !

[gaffo]

same issue for me

[neginqantas]

Same issue for me
"react-scripts": "4.0.0",
"typescript": "^4.0.5"

[LauridsA]

I tried using @romelgomez 's solution, however I was getting errors. I managed to solve it using a combination of @romelgomez and @149203 's solutions;

...
"scripts": {
    "start": "rm -rf tsconfig.json && react-scripts start",
    ...

Essentially removing tsconfig upon every "npm start". Thanks guys!

[dimitridumont]

I had the same problem, I deleted the tsconfig.json file then run yarn start, and it worked 🚀

Maybe a problem with create-react-app, I uninstalled it then reinstalled

[VortrusDev]

Since, I don't like to use beta versions, I used the following settings:
Use an older typescript version (here typescript 4.0.5) with react-scripts 4.0.0, which fit together nicely.

package.json

"react-scripts": "4.0.0",
"typescript": "4.0.5",

Now, you have to adjust tsconfig.json, because "jsx": "react-jsx" is not available in this typescript version. If you don't adjust tsconfig you will run into the following error:
error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.

Use "jsx": "react" instead.

If you'd like to use beta or dev versions, you could simply use a new typescript dev version:

"react-scripts": "4.0.0",
"typescript": "4.2.0-dev.20201121",

This worked perfectly for me. Hopefully this gets patched sometime soon, I'm not using it for anything particularly important but I know many people do use it for pretty important stuff.

[cseas]

Can we please have a release with the fix? The Issue is marked as closed but still many people are reporting this problem.

[onionhammer]

Someone should just open a new issue and reference that this issue should be re-opened

[ccarcaci]

Someone should just open a new issue and reference that this issue should be re-opened

Go for it ;)

[ccarcaci]

Changing node_modules content works up till "npm install" or "yarn install" command is issued (e.g. within a Dockerfile).

Is this a good solution?

[dakotaJang]

I gave up tying to upgrade the react-scripts from 3.4.x to 4.0.0 in my previous typescript project.
Then tried npx create-react-app my-app --template pwa-typescript to just get a fresh start.
But I still get the same errors.

I see that issue is the "closed" here...
Does that imply that this a separate issue from CRA that is only associated to repo at https://github.com/cra-template/pwa?

[xr0master]

Comedy with solutions, just:

1. replace "jsx": "react" to "jsx": "react-jsx"
2. fix typo in

verifyTypSscriptSetup.js

First issue I found: (line 151)

    jsx: {
      parsedValue:
        hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta')
          ? ts.JsxEmit.ReactJsx
          : ts.JsxEmit.React,

It must be ts.JsxEmit.ReactJSX (capital letters) instead of ts.JsxEmit.ReactJsx.

P.S. In any case, get a notification that your typescript version is not supported, but everything will work.

[wilfredlopez]

ReactJSX

That's the problem. Thanks!

[kirintwn]

confirmed updating to 4.0.1 fixed the problem.

[codepiyush]

4.0.1 fixed the problem. if you are getting Argument for '--jsx' option must be: 'preserve', 'react-native', 'react' and
Cannot use JSX unless the '--jsx' flag is provided this is because vs code is using typescript 4.0.2 for intellisense. Change it to workspace version of typescript, the errors will be gone.

Edit: typescript 4.0.2 doesn't support react-jsx as a valid value. Workspace version is newer hence fixes that..I guess.

[sixertoy]

It works for:

package.json

"react-scripts": "4.0.0",
"typescript": "4.0.3",

tsconfig.json

"jsx": "react",

[pyderator]

same issue with me too.
For now I have to change the value to react from react-jsx each time I restart the server as after restarting it changes it to react-jsx again.

[brunoparga]

4.0.1 still has TS issues for me. I get:

Failed to compile.

./src/index.tsx
Module not found: Can't resolve 'react-refresh/runtime' in '[path]/[app]/src'

I get this with both TypeScript 3.9.7 and 4.0.5. VSCode is using the app version of TS, tsconfig.json has "jsx": "react", "noFallthroughCasesInSwitch": true, and also ts.JsxEmit.ReactJSX is with capital letters.

EtA: 4.0.1 does not put the invalid value "react-jsx" for me, unlike for the user above.

[marceloclp]

For anyone looking for a more reliable work around for the time being, that doesn't consist on deleting the tsconfig file or manually changing the content of the faulty file every time dependencies are updated, here is what I did:

1) Run yarn add line-replace --dev
2) Create a js file with the code below somewhere on your root folder.
3) Update your start script in package.json to node path/to/file && react-scripts start

const rplce = require('line-replace')
const path = require('path')

const filePath = path.join(
    __dirname,
    '../node_modules/react-scripts/scripts/utils',
    'verifyTypeScriptSetup.js',
)

rplce({
    file: filePath,
    line: 238,
    text: "    } else if (parsedCompilerOptions[option] !== valueToCheck && option !== 'jsx') {",
    callback: ({ file, error }) => {
        if (error) return console.error(error)
        console.log(`Replaced ${file} successfuly!`)
    }
})

So your script should look something like this:

{
  "start": "node fix-cra.js && react-scripts start"
}