Next.js10系でビルド時にterser-webpack-pluginがエラーになりビルドが失敗する際の対応
![Next.js10系でビルド時にterser-webpack-pluginがエラーになりビルドが失敗する際の対応](/_next/image?url=https%3A%2F%2Ft-cr.jp%2Fassets%2Fimg%2Fpost%2Fthumb%2Fnext.jpg&w=3840&q=75)
Next.js10系でビルド時にterser-webpack-pluginがエラーになりビルドが失敗する際の対応についてメモしました。
経緯
Nextで作成したアプリのバージョンを10へあげてproductionビルドを実行した際に
エラーになりビルドが通らなくなってしまったことがきっかけでした。
環境
- next 10.2.3
- node 14.15.3
発生したエラー
next build
を実施した際に'javascript' of undefined
というエラーが発生しました。
vbnet> Build error occurred
TypeError: Cannot read property 'javascript' of undefined
実行ログ
実行時の全体のログになります。
swift$ NODE_ENV=production next build src
info - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
production production
info - Checking validity of types
> Build error occurred
TypeError: Cannot read property 'javascript' of undefined
at /Users/XXXX/app/node_modules/terser-webpack-plugin/dist/index.js:607:38
at SyncHook.eval [as call] (eval at create (/Users/XXXX/app/node_modules/next/dist/compiled/webpack/bundle4.js:128905:10), <anonymous>:159:1)
at SyncHook.lazyCompileHook (/Users/XXXX/app/node_modules/next/dist/compiled/webpack/bundle4.js:128856:20)
at Compiler.newCompilation (/Users/XXXX/app/node_modules/next/dist/compiled/webpack/bundle4.js:74738:26)
at /Users/XXXX/app/node_modules/next/dist/compiled/webpack/bundle4.js:74774:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/XXXX/app/node_modules/next/dist/compiled/webpack/bundle4.js:128919:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/XXXX/app/node_modules/next/dist/compiled/webpack/bundle4.js:128856:20)
at Compiler.compile (/Users/XXXX/app/node_modules/next/dist/compiled/webpack/bundle4.js:74769:28)
at /Users/XXXX/app/node_modules/next/dist/compiled/webpack/bundle4.js:74428:11
at Compiler.readRecords (/Users/XXXX/app/node_modules/next/dist/compiled/webpack/bundle4.js:74636:11)
error Command failed with exit code 1.
エラーの原因について
エラーログの内容としてはjavascript
が見つからないため読み込めないというエラーで
アプリケーションのエラーではなくライブラリ関連のエラーのようです。
webpack5を利用する場合フラグの変更が必要
ビルド時のログと三勝先のドキュメントを確認するとNext.jsではWebpack4と5が併用されていてバージョン10.23でWebpack5を利用するためには フラグの変更が必要なことがわかりました。
rubyinfo - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
next.config.jsの設定を変更して解決
webpack5の設定をtrueへ変更
next.config.jsのwebpack5の設定をtrue
へ変更して解決しました。
next.config.js
next.config.jsmodule.exports = {
future: { webpack5: true }
}
再度ビルドを実行して確認
再度next build
コマンドでビルドを実行して確認します。
scss$ NODE_ENV=production next build src
// 中略
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
Done in 107.99s.
エラーが発生せず無事解決することができました。
代替案
今回はWebpack5でビルドする形で解決しましたが
Webpack4と互換しかないプラグインなど場合はバージョンのダウングレードが必要です。
tenserプラグインの場合下記のような形でインストールし直すことでも
エラーを解消することができました。
ruby$ yarn add -D terser-webpack-plugin@4.2.3
その他
Next.js10.2系ではwebpack4がデフォルト
現在のNext.js10.2系では後方互換を保つためにwebpack4がデフォルトとなっているため
Webpack関連のライブラリは4と互換のものを利用するか
今回のようにWebpack5の設定をtrue
へ変更する対応が必要になりそうです。
Next.js11系はWebpack5がデフォルト
Next.js11以降はデフォルトでwebpack5が有効になるようです。
参考文献
記事Article
もっと見る- article
Dockerの利用していないゴミを掃除しディスクスペースを解放するいくつかのやり方を紹介
- article
Next.js のバンドルサイズを可視化する@next/bundle-analyzer の紹介
- article
VSCodeでTypescriptファイルのimport補完で相対パスではなくエイリアスするための設定
- article
UUIDより短いユニークなIDを生成できるnpmライブラリnanoidの使い方
- article
【解決方法】TypeScript発生したTS2564 エラーの対処
- article
express で IP を取得する際などに利用する req.connection 非推奨(deprecated)の対処