※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。


【npx】create-react-appでアプリケーション作成時にタイムアウトエラー

react create-react-app パッケージ npx npm nodejs

投稿日:2021年2月9日

このエントリーをはてなブックマークに追加
ネット環境がおそすぎる場合には開発を始めることすらできない場合があります。自分の環境を嘆いていてもしょうがないので、なんとか自分が解決できる方法を探してみましょう。

エラーの発生

create-react-appコマンドでreactアプリケーションを作成しようとしたところタイムアウトエラーで失敗してしまいました。

ターミナル
% npx create-react-app context_sample --template typescript
npx: 67個のパッケージを25.876秒でインストールしました。

Creating a new React app in /home/ogihara/Projects/react_ts/context_sample.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...

npm ERR! Response timeout while trying to fetch https://registry.npmjs.org/@typescript-eslint%2feslint-plugin (over 30000ms)

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ogihara/.npm/_logs/2021-02-09T12_30_48_030Z-debug.log

Aborting installation.
  npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template-typescript has failed.

Deleting generated file... package.json
Deleting context_sample/ from /home/ogihara/Projects/react_ts
Done.

まあ僕の糞雑魚ネット環境が悪いのは明確なのですが、そんなことを言っていてもしょうがないので、タイムアウトしないように設定してあげました。

解決法

結論からいうと以下のファイルを作成することで解決しました。

~/.npmrc
timeout=600000
prefer-offline=true
no-audit=true

これで再度create-react-appの作成コマンドを実行します。

ターミナル
% npx create-react-app --template typescript sample_context

解説

~/.npmrcファイルに設定した値はnpm install時にオプションとして設定されます。

それぞれの値については以下のとおりです。

  • timeout:npm installでタイムアウトするまでの時間(ミリ秒)。デフォルトでは30秒に設定されているので600000ミリ秒、つまり10分に拡張しました。
  • prefer-offline:このフラグがtrueのとき、インストール対象のパッケージがローカルのキャッシュに存在する場合にはそちらを使用します。
  • no-audit:パッケージのインストール時にパッケージの脆弱性をチェックする機能があります。no-auditフラグがtrueの時、このチェックは無視されます。

さいごに

timeoutについては大きな値を設定しても問題ありませんが、prefet-offlineno-auditの使用には十分気をつけてください。

今回の僕の例では、作成プロジェクトが単純なサンプルだったので問題ありませんが、公開するようなプロジェクトを作成する場合にはprefer-offlineとno-auditの設定は消しておくべきでしょう。

このエントリーをはてなブックマークに追加


関連記事

記事へのコメント
    
検索