✨
【@next/bundle-analyzer】ANALYZE=true yarn buildコマンドのエラーを解決する
はじめに
Next.jsのバンドルサイズを測るために@next/bundle-analyzerを導入したところ、コマンドエラーが起こってしまったので、見つけ出した解決方法を記します。
前提条件
前提条件として、Next.jsを使ったプロジェクトを使用しています。
使用OSはwindows10 homeです。
また、ライブラリである@next/bundle-analyzerをインストールしています。
@next/bundle-analyzerの公式の通りの設定を行い、下記コマンドを実行したものとします。
ANALYZE=true yarn build
@next/bundle-analyzerの公式の設定はリンクを参考にしてください。
エラーの詳細
私が遭遇したエラーは以下のようなものです。
bundle-analyzer, The term 'ANALYZE=true' is not recognized as the name of a cmdlet,
function, script file, or operable program.
これは、ANALYZE=trueがwindowsにコマンドとして認識されない為に起こったものです。
どうやら、調べていくとLinuxではANALYZE=true yarn buildコマンドをそのまま実行すれば良いのですが、windowsでは今回のようなエラーが出てしまうようです。
解決策
調べているうちに、Next.jsのGithubに以下のようなイシューが見つかりました。
これの通りにしていけば、解決できるようです。
まずは、cross-envというライブラリをプロジェクトにインストールします。
cross-envを入れる事によって、OSがwindowsの場合でもnpmコマンド実行時に環境変数を設定することができるようになります。
これで先ほどのエラーを解消することが可能です。
インストールする
npm
npm i --save-dev cross-env
yarn
yarn add --dev cross-env
コマンドを実行する
イシューにある通りのコマンドを実行します。
npx cross-env ANALYZE=true yarn build
Discussion