4.0 alpha - TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible

[cktang88]

Describe the bug

I updated a typescript CRA project (previously on ^3.4.0 react-scripts version) to use react-scripts "next" version to try out 4.0 alpha (following https://gist.github.com/iansu/282dbe3d722bd7231fa3224c0f403fa1), but encountered this error when running yarn start

yarn run v1.22.4
$ craco start
/Users/kwuang/github/suma-web/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:210
        appTsConfig.compilerOptions[option] = suggested;
                                            ^

TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible
    at verifyTypeScriptSetup (/Users/kwuang/github/suma-web/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:210:45)
    at Object.<anonymous> (/Users/kwuang/github/suma-web/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at start (/Users/kwuang/github/suma-web/node_modules/@craco/craco/lib/cra.js:202:5)
    at Object.<anonymous> (/Users/kwuang/github/suma-web/node_modules/@craco/craco/scripts/start.js:27:1)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Did you try recovering your dependencies?

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from /Users/kwuang/github/suma-web/node_modules/create-react-app

  System:
    OS: macOS 10.15.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 13.7.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.6 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.105
    Firefox: 74.0.1
    Safari: 13.0.5
  npmPackages:
    react: ^16.13.1 => 16.13.1 (16.12.0)
    react-dom: ^16.13.1 => 16.13.1 (16.12.0)
    react-scripts: next => 4.0.0-next.77+3d74b79d
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. change to next version of react-scripts in package.json
2. yarn to install new deps
3. yarn start

Expected behavior

Expected yarn start to work as before.

Actual behavior

Has console output (see above).

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[jamsch]

Didn't read too much in to this but this seems to be working for me. Not sure why Immer is being used in this case where the readTsConfig object doesn't seem to be changed at all? Guessing there's some need for a shallow or deep copy of readTsConfig?

verifyTypeScriptSetup.js

Before:

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

After:

parsedTsConfig = {...readTsConfig};

const result = ts.parseJsonConfigFileContent(
  parsedTsConfig,
  ts.sys,
  path.dirname(paths.appTsConfig)
);
  

[Daniel-Griffiths]

@jamsch I can confirm that the above change fixed it for me. 🙂

[igor-pavlichenko]

This was an issue for me on the first few days after the Alpha-77 release and I had to use the fix from comments above to make it work.. but then it suddenly started working and I have no idea what fixed it.
I did delete my package-lock.json and node_modules though.. might have been some back-stage package update or something.

Anyway, you might want to check it again and close the issue if it's no longer an issue :)

[chrislambe]

I was able to sidestep this error by adding "noFallthroughCasesInSwitch": true to compilerOptions in my tsconfig.json (which I think just avoids the need for this code to run at all).

[danielkcz]

I am getting a similar error, but for a different property...

Cannot add property paths, object is not extensible

I know that paths are technically not supported by CRA, but I've been using that with the current stable version just fine. Please, don't make it harder than it is already. There is no practical reason why paths should be banned from use.

[timini]

also getting this error

[WieserSoftware]

I'm also seeing the above (noFallthroughCasesInSwitch object is not extensible) error, even after running npm ci
As mentioned above, adding this to tsconfig.json
"noFallthroughCasesInSwitch": true
seems to have fixed that error

[JamieDixon]

Same issue here and fixed with the "noFallthroughCasesInSwitch": true solution above.

[jamsch]

Note: this also happens if you have configured paths in your tsconfig. I have a set up with "react-app-rewired" in a monorepo with some webpack overrides to accommodate for paths. This bug prevents me from using v4 at all.

[rizrmd]

Note: this also happens if you have configured paths in your tsconfig. I have a set up with "react-app-rewired" in a monorepo with some webpack overrides to accommodate for paths. This bug prevents me from using v4 at all.

This fixed the issue, but vscode cannot recognise the paths, it is a deal breaker for me

[alexkuz]

Maybe there should be a SKIP_TS_SETUP_CHECK flag, similar to SKIP_PREFLIGHT_CHECK

create-react-app/packages/react-scripts/scripts/start.js

Lines 22 to 32 in d5c0fe2

	// Ensure environment variables are read.
	require('../config/env');
	// @remove-on-eject-begin
	// Do the preflight check (only happens before eject).
	const verifyPackageTree = require('./utils/verifyPackageTree');
	if (process.env.SKIP_PREFLIGHT_CHECK !== 'true') {
	verifyPackageTree();
	}
	const verifyTypeScriptSetup = require('./utils/verifyTypeScriptSetup');
	verifyTypeScriptSetup();
	// @remove-on-eject-end