【備忘録】
私自信TypeScriptに詳しくなかったのでこれでなぜ解決したかなど理由は分かりませんが、探すまで時間がかかったので、忘れないようにと残しておきます。
エラーまでにやったこと
$ npx create-react-app アプリ名 --template typescript
$ cd アプリ名
$ yarn start <- ここでエラー発生
エラー内容
$ yarn start
yarn start
yarn run v1.21.1
warning ../../../package.json: No license field
$ 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
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
解決策(参考URLも載せます)
/アプリ名/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
変更前
238: } else if (parsedCompilerOptions[option] !== valueToCheck) {
変更後
238: } else if (parsedCompilerOptions[option] !== valueToCheck && option !== "jsx") {
こちらが参考URL
4.0.0 breaks with typescript (all versions) #9868
他の方で違う方法で解決されている記事もありましたので共有します
https://qiita.com/makishy/items/913e20dff7caf458c965