Error when trying to run an upgraded CRA 4 Typescript project #9874

elylucas · 2020-10-23T20:32:39Z

Describe the bug

When upgrading a Typescript project from CRA 3.4 to CRA 4.0, you get an error when running npm run start:

TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible
    at verifyTypeScriptSetup ({...}/react-cra4-upgrade/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:232:45)
    at Object.<anonymous> ({...}/react-cra4-upgrade/node_modules/react-scripts/scripts/start.js:31:1)

This appears to happen when scanning the tsconfig.json file and modifying it for suggested changes. Based on the error, it appears the object holding the ts config cannot be changed.

When I manually add the noFallthroughCasesInSwitch config item to the ts config it passes.

(Write your answer here.)

Did you try recovering your dependencies?

Yes

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

current version of create-react-app: 4.0.0
running from /Users/elylucas/.nvm/versions/node/v12.13.0/lib/node_modules/create-react-app

System:
OS: macOS 10.15.6
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v12.13.0/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v12.13.0/bin/npm
Browsers:
Chrome: 86.0.4240.111
Edge: Not Found
Firefox: 80.0.1
Safari: 14.0
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.0 => 4.0.0
npmGlobalPackages:
create-react-app: 4.0.0

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

Try creating a Typescript based app with react-scripts 3.4.X (here is a link to such an app: https://github.com/elylucas/react-cra4-ts-upgrade-issue).
Upgrade CRA by running npm i --save-exact react-scripts@4.0.0
Run npm run start and see the error.

Expected behavior

Based on the code in verifyTypeScriptSetup.js it looks like the user should see a message saying their tsconfig.json is being updated with the recommenced values, and then the app should start as normal.

Actual behavior

Get the following error when trying to start the app:

Reproducible demo

Link to a Ionic React app built with TS and CRA 3.4:
https://github.com/elylucas/react-cra4-ts-upgrade-issue

The text was updated successfully, but these errors were encountered:

m-rutter · 2020-10-23T20:45:03Z

Possible work around:

add this to your tsconfig:

{
  "compilerOptions": {
    "noFallthroughCasesInSwitch": true,
    // ...
  }
  // ...
}

A question to ask here is why is CRA overwriting a tsconfig option like this. Its one thing to overwrite the paths configs because its not supported in the babel/webpack config, or set as a default in a new project, but this seems a bit too opinionated for CRA as it has nothing to do with the build pipeline CRA provides.

It treats fallthroughs in switch statements as errors:

Report errors for fallthrough cases in switch statement.

https://www.typescriptlang.org/docs/handbook/compiler-options.html

elylucas · 2020-10-23T20:53:33Z

Possible work around:

add this to your tsconfig:
{
  "compilerOptions": {
    "noFallthroughCasesInSwitch": true,
    // ...
  }
  // ...
}
A question to ask here is why is CRA overwriting a tsconfig option like this. Its one thing to overwrite the paths configs because its not supported in the babel/webpack config, or set as a default in a new project, but this seems a bit too opinionated for CRA as it has nothing to do with the build pipeline CRA provides.

It treats fallthroughs in switch statements as errors:

Report errors for fallthrough cases in switch statement.

https://www.typescriptlang.org/docs/handbook/compiler-options.html

Yep, adding the noFallthroughCasesInSwitch fixes the problem, and yes, I agree that it should be up to the dev. This doesn't seem to be required to run React in TS so not sure why we "need" it in there.

leosuncin · 2020-10-23T21:24:16Z

Also fail when jsx is set to a different value of react in tsconfig.json

Stacktrace

> react-scripts test
/home/user/projects/todo-webapp/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/user/projects/todo-webapp/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)

at Object. (/home/user/projects/todo-webapp/node_modules/react-scripts/scripts/test.js:32:1)

at Module._compile (internal/modules/cjs/loader.js:1076:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)

at Module.load (internal/modules/cjs/loader.js:941:32)

at Function.Module._load (internal/modules/cjs/loader.js:782:14)

at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)

at internal/main/run_main_module.js:17:47

npm ERR! Test failed.  See above for more details.

My previous tsconfig.json

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

The required changes to upgrade:

diff --git a/tsconfig.json b/tsconfig.json
index 0980b23..7b1d3c6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,12 +12,13 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "react"
   },
   "include": [
     "src"

elylucas · 2020-10-23T21:33:12Z

related #9868

mateusPPinh · 2020-10-29T03:05:54Z

@m-rutter , yea that's works! thank you

davakos · 2020-11-05T14:13:53Z

I am using LinguiJS for i18n in an application and it requires that "jsx": "preserve" be set in tsconfig.json in order to preserve JSX and tagged template literals for the lingui plugins (such as extracting/compiling message catalogs):
https://lingui.js.org/guides/typescript.html

As such, I can't set "jsx": "react", but without this change I cannot start a dev run server and get the same TypeScript error noted above:

$ npm start

> cra4@0.1.0 start cra4
> react-scripts start

./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 (./node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (./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! cra4@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cra4@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

To reproduce:
npx create-react-app cra4 --template redux-typescript
Then modify tsconfig.json and change:

{
  "compilerOptions": {
    "jsx": "preserve",
    "target": "es2016"
  }
}

and npm start

Any thoughts on fixes or temporary work-arounds?
Thank you and best regards,

asherccohen · 2020-12-02T08:22:20Z

See this #10144

davakos · 2020-12-28T17:10:52Z

I am using LinguiJS for i18n in an application and it requires that "jsx": "preserve" be set in tsconfig.json in order to preserve JSX and tagged template literals for the lingui plugins (such as extracting/compiling message catalogs):
https://lingui.js.org/guides/typescript.html

As such, I can't set "jsx": "react", but without this change I cannot start a dev run server and get the same TypeScript error noted above:

$ npm start

> cra4@0.1.0 start cra4
> react-scripts start

./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 (./node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (./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! cra4@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cra4@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

To reproduce:
npx create-react-app cra4 --template redux-typescript
Then modify tsconfig.json and change:

{
  "compilerOptions": {
    "jsx": "preserve",
    "target": "es2016"
  }
}

and npm start

Any thoughts on fixes or temporary work-arounds?
Thank you and best regards,

Update:
From my testing with latest create-react-app/react-scripts 4.0.1, it looks like LinguiJS is now working with React17+TypeScript 4+CRA 4.0.1 and I am no longer getting the runtime error Cannot assign to read only property 'jsx' of object '#<Object>'.
This is despite the tsconfig.json compilerOptions.jsx "preserve" option being overwritten with "react-jsx" when calling react-scripts (such as via npm start).
This has not been tested exhaustively, but has worked for me both in an existing app upgraded to React17+TS4+CRA 4.0.1 and in a new app bootstrapped using create-react-app.

For more details, please see:
lingui/js-lingui#826

elylucas added issue: bug report needs triage labels Oct 23, 2020

dsherret mentioned this issue Oct 24, 2020

Fix build for TS 4.0 dsherret/ts-ast-viewer#79

Closed

LoneRifle mentioned this issue Oct 25, 2020

[Snyk] Security upgrade react-scripts from 3.4.3 to 4.0.0 opengovsg/ts-template#289

Merged

LoneRifle added a commit to opengovsg/ts-template that referenced this issue Oct 25, 2020

fix(cra): work around facebook/create-react-app#9874

60411a4

davakos mentioned this issue Nov 5, 2020

CRA4+TypeScript failure on jsx:preserve lingui/js-lingui#826

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error when trying to run an upgraded CRA 4 Typescript project #9874

Error when trying to run an upgraded CRA 4 Typescript project #9874

elylucas commented Oct 23, 2020 •

edited

m-rutter commented Oct 23, 2020 •

edited

elylucas commented Oct 23, 2020

leosuncin commented Oct 23, 2020

elylucas commented Oct 23, 2020

mateusPPinh commented Oct 29, 2020

davakos commented Nov 5, 2020

asherccohen commented Dec 2, 2020

davakos commented Dec 28, 2020

Error when trying to run an upgraded CRA 4 Typescript project #9874

Error when trying to run an upgraded CRA 4 Typescript project #9874

Comments

elylucas commented Oct 23, 2020 • edited

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

m-rutter commented Oct 23, 2020 • edited

elylucas commented Oct 23, 2020

leosuncin commented Oct 23, 2020

elylucas commented Oct 23, 2020

mateusPPinh commented Oct 29, 2020

davakos commented Nov 5, 2020

asherccohen commented Dec 2, 2020

davakos commented Dec 28, 2020

elylucas commented Oct 23, 2020 •

edited

m-rutter commented Oct 23, 2020 •

edited