Create-react-app: Error when trying to run an upgraded CRA 4 Typescript project
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 [email protected] - Run
npm run startand 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
elylucas
All 6 comments
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.
m-rutter
on 23 Oct 2020
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.
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.
elylucas
on 23 Oct 2020
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"
leosuncin
on 23 Oct 2020
related #9868
elylucas
on 23 Oct 2020
@m-rutter , yea that's works! thank you
matheusPinheiroP
on 29 Oct 2020
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
> [email protected] 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! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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,
davakos
on 5 Nov 2020
Related issues
fson
路
3Comments
fson
路
3Comments
stopachka
路
3Comments
AlexeyRyashencev
路
3Comments
alleroux
路
3Comments
Most helpful comment
Possible work around:
add this to your tsconfig:
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: