reactプロジェクトの実行時に「TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible」エラーが発生する

create-react-appで作成したプロジェクトでyarn startを実行したところ、下記のようなエラーが発生してアプリの起動ができませんでした。

/Users/***/.nodenv/shims/node /Users/***/.nodenv/versions/12.19.0/lib/node_modules/npm/bin/npm-cli.js start

> lambnote@0.1.0 start /Users/***/Development/lambnote
> react-scripts start

/Users/***/Development/lambnote/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/***/Development/lambnote/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:231:45)
    at Object.<anonymous> (/Users/***/Development/lambnote/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! lambnote@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the lambnote@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/***/.npm/_logs/2020-11-03T05_54_40_162Z-debug.log

Process finished with exit code 1

原因はreact-scripts 4.0.0のバグ

どうやらreact-scriptsのバージョン4.0.0で発生するバグのようです。
ちょうど各npmパッケージをアップデートしていて、react-scriptsも何も考えずにアップデートしていました。

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

対応方法

対応方法はtsconfig.jsonに下記プロパティを追加するだけです。

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