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

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® Core™ 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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 118
  • Comments: 117 (23 by maintainers)

Commits related to this issue

Most upvoted comments

@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. 😏

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

@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.

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

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.

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") {

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 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

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",

Here’s how I solved this temporarily until react-scripts@4.01 is released.

  1. Place a file in your package root called verifyTypeScriptSetup.js that contains the following.
    "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 react-scripts@4.01.

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>'

Fix for me was to adjust the TS version within VS code. image

It works for:

package.json

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

tsconfig.json

"jsx": "react",

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

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",

confirmed updating to 4.0.1 fixed the problem.

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.

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 😅

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

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.

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

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.

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???

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

@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… 😦

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.

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 !

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

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.

@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

Fixed in #9921.

Yes this issue is fixed I am using "react-scripts": "^4.0.1" and "typescript": "^4.1.3" which are latest today.

In some cases you may want to remove the node_modules directory and clean install.

you can delete tsconfig.json , npm run start . The project will create new tsconfig.json file .

This doesn’t change anything as the new tsconfig created by react-scripts is doomed, too. I’d say it’s a blocker for any newcommer to the CRA and react developement in general.

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.

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

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.

@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.

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

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

multi-step-form-typescript@0.1.0 start /home/ehsan/Documents/GitHub/multi-step-form-typescript react-scripts start

/home/ehsan/Documents/GitHub/multi-step-form-typescript/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 (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43) at Object.<anonymous> (/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/start.js:31:1) at Module._compile (internal/modules/cjs/loader.js:1137:30) at Object.Module._extensions…js (internal/modules/cjs/loader.js:1157:10) at Module.load (internal/modules/cjs/loader.js:985:32) at Function.Module._load (internal/modules/cjs/loader.js:878:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) at internal/main/run_main_module.js:17:47 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! multi-step-form-typescript@0.1.0 start: react-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the multi-step-form-typescript@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/ehsan/.npm/_logs/2020-11-22T18_20_20_546Z-debug.log

The above error I am getting after running yarn start

So what you need to do in order to get rid of this

on your terminal click on the error link

/home/ehsan/Documents/GitHub/multi-step-form-typescript/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239 appTsConfig.compilerOptions[option] = value;

and then change the 239 line to

else if (parsedCompilerOptions[option] !== valueToCheck && option !== “jsx”)

Now after changing this goto tsconfig.json

and than replace “jsx”: “react-jsx” to “jsx”: “react”

now run your project with sudo yarn start

It’s work for me, hope this will work for you too 👍 💯

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.

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.

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

“react-scripts”: “4.0.0” “typescript”: “4.0.3” works for me

I solve this error updating react-scripts to 4.0.3

yarn upgrade react-scripts@4.0.3

you can delete tsconfig.json , npm run start . The project will create new tsconfig.json file .

This doesn’t change anything as the new tsconfig created by react-scripts is doomed, too. I’d say it’s a blocker for any newcommer to the CRA and react developement in general.

update to react-scripts 4.0.1 they fixed it, and it works now as far as I know

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"
}

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!

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

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

Screenshot from 2020-11-21 13-55-09

Screenshot from 2020-11-21 13-55-29

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:react-scripts@4.0.0#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(

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

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)

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

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>'

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

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.

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?

@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.

you can delete tsconfig.json , npm run start . The project will create new tsconfig.json file .

ReactJSX

That’s the problem. Thanks!

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?

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.

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

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

@donavon, thank you that solves my problem.

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.

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

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

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.

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.