Windowsでの@next/bundle-analyzer

2023/07/07に公開

Windowsで動かない

@next/bundle-analyzerを使いたいなと思って
こちらを参考に入れていざこのコマンドを動かそうと思ったら

ANALYZE=true npm run dev
- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- error Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
ReferenceError: withPlugins is not defined
    at Object.<anonymous> (C:\Users\'USerName'\Documents\housoubu\next.config.js:16:1)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25) {
  type: 'ReferenceError'
}

というエラーが出たんですよ

聴いてみた

私「ANALYZE=true next devが実行できません」
next dev はnpm run devのショートカット??的なものです(自分でもわかってない)
GitHub Copilot(要約)
Windowsだと環境変数の設定方法違うから毎回これ使いな~

set ANALYZE=true&&next dev
本文

ANALYZE=true next devを実行すると、次のようなエラーが表示される場合があります。

'ANALYZE' is not recognized as an internal or external command, operable program or batch file.

このエラーは、Windowsのコマンドプロンプトで環境変数を設定する方法が異なるために発生する可能性があります。代わりに、次のコマンドを実行してください。

set ANALYZE=true&&next dev

このコマンドは、Windowsのコマンドプロンプトで環境変数を設定するための正しい構文を使用しています。これにより、ANALYZE=trueが環境変数として設定され、next devが実行されます。

あと参考サイトどおりにnext compose pluginsを使った人は

const withPlugins = require('next-compose-plugins');

も追記しといてください!

まとめ

const withPlugins = require('next-compose-plugins');

を追記して
package.jsonのscriptにしたのコマンドのショートカット?を追加する

set ANALYZE=true&&next dev

GitHub Copilot神

Discussion