React-app-rewired: Incompatibility with react-scripts v4.0.0

Created on 25 Oct 2020  路  2Comments  路  Source: timarney/react-app-rewired

After upgrading my react-scripts to v4.0.0, and React to 17.0.1, and leaving react-app-rewired at v2.1.6, I get the following.

``` $ yarn start
yarn run v1.22.5
$ react-app-rewired start
/Users/davisford/Documents/aos-reminders/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:231
appTsConfig.compilerOptions[option] = suggested;
^

TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible
at verifyTypeScriptSetup (/Users/davisford/Documents/aos-reminders/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:231:45)
at Object. (/Users/davisford/Documents/aos-reminders/node_modules/react-scripts/scripts/start.js:31:1)
at Module._compile (internal/modules/cjs/loader.js:1201:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
at Module.load (internal/modules/cjs/loader.js:1050:32)
at Function.Module._load (internal/modules/cjs/loader.js:938:14)
at Module.require (internal/modules/cjs/loader.js:1090:19)
at require (internal/modules/cjs/helpers.js:75:18)
at Object. (/Users/davisford/Documents/aos-reminders/node_modules/react-app-rewired/scripts/start.js:35:1)
at Module._compile (internal/modules/cjs/loader.js:1201:30)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.```

Most helpful comment

Agreed with your diagnosis, I apologize for the issue!

For anyone following me here, please use this fix to solve your problem.

I also got that too. Just figured out that I have to change "compilerOptions.jsx" from "preserve" to "react".

"compilerOptions": {
  "jsx": "react",
  "noFallthroughCasesInSwitch": true
}

All 2 comments

This error is actually caused by create-react-app itself trying to set default values for some of the tsconfig.json parameters (nothing to do with react-app-rewired at all). The original CRA issue is at: https://github.com/facebook/create-react-app/issues/9429

Setting noFallthroughCasesInSwitch to true in your tsconfig.json should get you past this particular error, but there are a few other parameters in tsconfig.json that have been documented in the CRA issue above that may cause a very similar error to occur (basically the only difference in error message will be that there is a different parameter name - paths and jsx settings were identified as problematic as well as the noFallthroughCasesInSwitch).

Agreed with your diagnosis, I apologize for the issue!

For anyone following me here, please use this fix to solve your problem.

I also got that too. Just figured out that I have to change "compilerOptions.jsx" from "preserve" to "react".

"compilerOptions": {
  "jsx": "react",
  "noFallthroughCasesInSwitch": true
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ljxyweb picture ljxyweb  路  4Comments

artalar picture artalar  路  4Comments

Yegair picture Yegair  路  5Comments

Tobbe picture Tobbe  路  5Comments

001123 picture 001123  路  4Comments