Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
cktang88 opened this issue Aug 5, 2020 · 52 comments

Comments

@cktang88
Copy link

cktang88 commented Aug 5, 2020

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

jamsch commented Aug 6, 2020

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

Daniel-Griffiths commented Aug 6, 2020

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

@igor-pavlichenko
Copy link

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

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

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.

@iansu iansu added this to the 4.0 milestone Sep 2, 2020
@iansu iansu removed the needs triage label Sep 2, 2020
@timini
Copy link

timini commented Sep 9, 2020

also getting this error
image

@WieserSoftware
Copy link

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

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

@jamsch
Copy link

jamsch commented Sep 21, 2020

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

rizrmd commented Sep 23, 2020

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

alexkuz commented Oct 2, 2020

Maybe there should be a SKIP_TS_SETUP_CHECK flag, similar to SKIP_PREFLIGHT_CHECK

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

@Annihil
Copy link

Annihil commented Oct 20, 2020

Without paths property in tsconfig, ts-jest also breaks in a monorepo.
Falling back to 4.0.0-next.64

@iansu iansu modified the milestones: 4.0, 4.0.1 Oct 23, 2020
@eXaminator
Copy link

I have another version of this. After adding noFallthroughCasesInSwitch like suggested above I get this error:

TypeError: Cannot add property jsx, object is not extensible
    at verifyTypeScriptSetup (...../node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (...../node_modules/react-scripts/scripts/test.js:32:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

@michchan
Copy link

michchan commented Oct 23, 2020

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

It works for me too!

@michchan
Copy link

michchan commented Oct 23, 2020

I have another version of this. After adding noFallthroughCasesInSwitch like suggested above I get this error:

TypeError: Cannot add property jsx, object is not extensible
    at verifyTypeScriptSetup (...../node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (...../node_modules/react-scripts/scripts/test.js:32:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

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

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

@grinry
Copy link

grinry commented Oct 23, 2020

How do you suggest to edit tsconfig.json when there is no tsconfig.json because I'm trying to just create new project by npx create-react-app my-app?

eventualbuddha added a commit to votingworks/bsd that referenced this issue Oct 23, 2020
This also updates to React 17, eslint 7, TypeScript v4, etc.
- React 17 has no new features, but does have a few breaking changes that shouldn't affect bsd. (https://reactjs.org/blog/2020/10/20/react-v17.html)
- eslint 7 and the updated config caused a minor issue (https://stackoverflow.com/a/64024916/549363)
- react-scripts v4 seems to have a bug while validating TS config, which this commit works around (facebook/create-react-app#9429)
@jgbright
Copy link

How do you suggest to edit tsconfig.json when there is no tsconfig.json because I'm trying to just create new project by npx create-react-app my-app?

You can create a new tsconfig.json file by running tsc --init.

npx tsc --init

@jkhaui
Copy link

jkhaui commented Oct 23, 2020

I've tried adding

I have another version of this. After adding noFallthroughCasesInSwitch like suggested above I get this error:

TypeError: Cannot add property jsx, object is not extensible
    at verifyTypeScriptSetup (...../node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (...../node_modules/react-scripts/scripts/test.js:32:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

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

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

Thanks for this, confirming it worked for me too! On its own, "noFallthroughCasesInSwitch": true didn't fix the issue. But adding "jsx: "react" has completely resolved it for me.

@flppv
Copy link

flppv commented Oct 24, 2020

Yeah for evreyone else I can confirm that it works only when both changes listed above are applied

@danielkcz
Copy link

danielkcz commented Oct 24, 2020

@flppv It still doesn't solve the "paths", because that's an object and no just primitive value. I am surprised they published 4.0.0 without handling such a "major" flaw.

@Annihil
Copy link

Annihil commented Oct 24, 2020

That is right, paths property still not allowed in 4.0.0, that's a bummer for monorepo setup 😕

polamjag added a commit to polamjag/assign-omikuji-2020 that referenced this issue Oct 24, 2020
about `"noFallthroughCasesInSwitch": true`:

facebook/create-react-app#9429
@wooandoo
Copy link

wooandoo commented Nov 5, 2020

@FredyC I use a temporary solution (see above how I update the file node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js)

@danielkcz
Copy link

danielkcz commented Nov 5, 2020

@wooandoo I know, but I still don't get it why the team decided to be this string. The path aliases work with CRA just fine, so why to prevent it?

@ianschmitz Also notice the number of 👍 in my previous #9429 (comment). Obviously, I am not the only one concerned about it. At least tell us if we need open new issue or if this is somehow being still decided or what. Please don't ignore it.

@ianschmitz
Copy link
Contributor

@FredyC does the fix not work for paths?

@Menci
Copy link

Menci commented Nov 6, 2020

Setting noFallthroughCasesInSwitch to true breaks code. You need to set it to false!

@danielkcz
Copy link

danielkcz commented Nov 6, 2020

@ianschmitz I honestly haven't tried, but seeing 30+ people giving 👍 and seeing this still present in the code, I don't think it's handled :)

paths: { value: undefined, reason: 'aliased imports are not supported' },

@Primajin
Copy link
Contributor

Don't really get why this was closed when this is still breaking when upgrading from an existing project to CRA 4.
The above change from #9429 (comment) @jamsch works - so can we please release this soon as a quick patch?

s-ong-c added a commit to s-ong-c/cra-template-songc that referenced this issue Nov 18, 2020
@sherlockwang
Copy link

Is there any reason why path alias is tsconfig.json? This should be a very useful feature.

@GE28
Copy link

GE28 commented Nov 20, 2020

Delete the "tsconfig.json" file, then run "npm start" or "yarn start"

@minhyeong-jang
Copy link

minhyeong-jang commented Nov 21, 2020

When I write "paths: { ... }" in compilerOptions, I got this error.

@BALEHOK
Copy link

BALEHOK commented Nov 21, 2020

Upgraded from react-scripts 3.4.3 to 4.0.0, got the same issue (as the topic starter).

This helped #9429 (comment)
Applied the change as a patch to react-scripts module.

Deleting tsconfig.json doesn't help, since the generated file does not match my preference and if I update it, the build fails again.

Looks like the fix has been merged but not released yet #9921

@gdrbyKo1
Copy link

#9921 is included with react-scripts v4.0.1. This also fixes the paths property.

@anton-matsyshyn
Copy link

anton-matsyshyn commented Nov 24, 2020

Also faced error Cannot add property noFallthroughCasesInSwitch, object is not extensible, and added "noFallthroughCasesInSwitch": true to my tsconfig.json. But after that I got this: Cannot read property 'use' of undefined. Has anyone faced this issue too?
There are my logs:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start'
1 verbose cli ]
2 info using npm@6.14.6
3 info using node@v12.18.4
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle intranet@0.1.0~prestart: intranet@0.1.0
6 info lifecycle intranet@0.1.0~start: intranet@0.1.0
7 verbose lifecycle intranet@0.1.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle intranet@0.1.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\Binary\bs-intranet\frontend\node_modules\.bin;D:\oracle\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Python34\;C:\Python34\Scripts;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files\Microsoft SQL Server\150\Tools\Binn\;C:\Program Files\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn\;C:\Program Files\nodejs\;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Python37\Scripts;C:\ProgramData\chocolatey\bin;C:\Gradle\gradle-6.0.1\bin;C:\Windows\System32;C:\Users\Anton\AppData\Local\Microsoft\WindowsApps;C:\Users\Anton\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Anton\.dotnet\tools;C:\Users\Anton\AppData\Roaming\npm;C:\Users\Anton\.dotnet\tools;C:\Python37\Scripts;C:\Program Files (x86)\Rico Suter\NSwagStudio\;C:\Gradle\gradle-6.0.1\bin;C:\Program Files\JetBrains\IntelliJ IDEA 2020.2.3\bin;;C:\Windows\System32;
9 verbose lifecycle intranet@0.1.0~start: CWD: D:\Binary\bs-intranet\frontend
10 silly lifecycle intranet@0.1.0~start: Args: [ '/d /s /c', 'react-app-rewired start' ]
11 silly lifecycle intranet@0.1.0~start: Returned: code: 1  signal: null
12 info lifecycle intranet@0.1.0~start: Failed to exec start script
13 verbose stack Error: intranet@0.1.0 start: `react-app-rewired start`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid intranet@0.1.0
15 verbose cwd D:\Binary\bs-intranet\frontend
16 verbose Windows_NT 10.0.19041
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
18 verbose node v12.18.4
19 verbose npm  v6.14.6
20 error code ELIFECYCLE
21 error errno 1
22 error intranet@0.1.0 start: `react-app-rewired start`
22 error Exit status 1
23 error Failed at the intranet@0.1.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

P.S. I'd also tried to set up noFallthroughCasesInSwitch to false, but this didn't help :/

wijloc added a commit to wijloc/github-explorer that referenced this issue Nov 25, 2020
Error Message: TypeError: Cannot add property
noFallthroughCasesInSwitch, object is not extensible

Issue: facebook/create-react-app#9429
tanem added a commit to tanem/state-machines-in-react that referenced this issue Nov 30, 2020
@browniefed
Copy link

Swapping the jsx property to react event when DISABLE_NEW_JSX_TRANSFORM=true is set should be by-passable.

@StanleySathler
Copy link

So I had the Cannot add property noFallthroughCasesInSwitch error. Added noFallthroughCasesInSwitch: true to my tsconfig.json.

This led to another error: Cannot assign to read only property 'jsx' of object '#<Object>'. Then I added jsx: 'react' to my tsconfig.json.

Now it shows Cannot read property 'use' of undefined. No idea how to fix this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests