【React】npx create-react-app 直後の npm start でエラーが出た時の対処法

はじめに

この記事による解決法は M1 Mac 特有の問題だと思われます。

結論

Node.js のバージョン変更によって解決出来た。
v14.16.1 -> v14.17.6

どこでエラーが起きたか？

React のチュートリアル
オプション 2: ローカル開発環境の

npx create-react-app my-app
cd my-app
npm start

を実行するとエラーが発生した。

ターミナルの表示内容

Starting the development server...


<--- Last few GCs --->

[4684:0x158008000]     1684 ms: Scavenge 73.2 (97.2) -> 64.1 (99.4) MB, 2.7 / 0.0 ms  (average mu = 0.990, current mu = 0.990) allocation failure 
[4684:0x158008000]     1742 ms: Scavenge 78.0 (99.7) -> 66.2 (102.2) MB, 1.6 / 0.0 ms  (average mu = 0.990, current mu = 0.990) allocation failure 


<--- JS stacktrace --->

FATAL ERROR: wasm code commit Allocation failed - process out of memory
 1: 0x1043ff740 node::Abort() [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
 2: 0x1043ff8c0 node::errors::TryCatchScope::~TryCatchScope() [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
 3: 0x104518960 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
 4: 0x1045188f4 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
 5: 0x104aad720 v8::internal::wasm::WasmCodeAllocator::AllocateForCodeInRegion(v8::internal::wasm::NativeModule*, unsigned long, v8::base::AddressRegion, v8::internal::wasm::WasmCodeAllocator::OptionalLock const&) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
 6: 0x104aae3ac v8::internal::wasm::NativeModule::CreateEmptyJumpTableInRegion(int, v8::base::AddressRegion, v8::internal::wasm::WasmCodeAllocator::OptionalLock const&) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
 7: 0x104aad07c v8::internal::wasm::NativeModule::AddCodeSpace(v8::base::AddressRegion, v8::internal::wasm::WasmCodeAllocator::OptionalLock const&) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
 8: 0x104aae1bc v8::internal::wasm::NativeModule::NativeModule(v8::internal::wasm::WasmEngine*, v8::internal::wasm::WasmFeatures const&, v8::internal::VirtualMemory, std::__1::shared_ptr<v8::internal::wasm::WasmModule const>, std::__1::shared_ptr<v8::internal::Counters>, std::__1::shared_ptr<v8::internal::wasm::NativeModule>*) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
 9: 0x104ab06f4 v8::internal::wasm::WasmCodeManager::NewNativeModule(v8::internal::wasm::WasmEngine*, v8::internal::Isolate*, v8::internal::wasm::WasmFeatures const&, unsigned long, std::__1::shared_ptr<v8::internal::wasm::WasmModule const>) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
10: 0x104abc230 v8::internal::wasm::WasmEngine::NewNativeModule(v8::internal::Isolate*, v8::internal::wasm::WasmFeatures const&, std::__1::shared_ptr<v8::internal::wasm::WasmModule const>, unsigned long) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
11: 0x104a8b57c v8::internal::wasm::AsyncCompileJob::CreateNativeModule(std::__1::shared_ptr<v8::internal::wasm::WasmModule const>, unsigned long) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
12: 0x104a8b744 v8::internal::wasm::AsyncCompileJob::GetOrCreateNativeModule(std::__1::shared_ptr<v8::internal::wasm::WasmModule const>, unsigned long) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
13: 0x104a93dd4 v8::internal::wasm::AsyncCompileJob::PrepareAndStartCompile::RunInForeground(v8::internal::wasm::AsyncCompileJob*) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
14: 0x104a93ba0 v8::internal::wasm::AsyncCompileJob::CompileTask::RunInternal() [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
15: 0x10445c4d0 node::PerIsolatePlatformData::RunForegroundTask(std::__1::unique_ptr<v8::Task, std::__1::default_delete<v8::Task> >) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
16: 0x10445b178 node::PerIsolatePlatformData::FlushForegroundTasksInternal() [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
17: 0x104c15538 uv__async_io [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
18: 0x104c27134 uv__io_poll [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
19: 0x104c159c8 uv_run [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
20: 0x104437c70 node::NodeMainInstance::Run() [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
21: 0x1043d8524 node::Start(int, char**) [/Users/あなたのコンピュータ名/.nvm/versions/node/v14.16.1/bin/node]
22: 0x196dcd430 start [/usr/lib/system/libdyld.dylib]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-app@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/2021-09-19T09_07_12_122Z-debug.log

解決法をどのようにして見つけたか

エラー内容があまりの量の文字であった為に圧倒されてしまった。
これにより上から順に読んでいく事をしなかった為に解決するまでに多くの時間を費やした。

まず冒頭に

Starting the development server...

と記述されていて、文の最後の部分

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-app@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/2021-09-19T09_07_12_122Z-debug.log

の ERR! がターミナルでは赤色で表示されていたこともあり、その部分からがエラー内容だと思い1行ずつ検索して解決法を探した。
複数ページの内容を行ってみたが解決せず。

次に、npm start でエラーが出ているので、
React npm start と調べ、上位のサイトに書かれている解決法を実行してみても解決せず。

ここで初めて上から順番に調べていこうと考えた。
そうするといきなり

FATAL ERROR: wasm code commit Allocation failed - process out of memory

と書かれていてここからエラー内容だったと気付き、検索するとすぐに解決法を見つけられた。

おわりに

エラー発生時は内容を飛ばさず最初から読んでいった方が結果的に早く解決出来ると感じた。

参考サイト