Next.js10系でビルド時にterser-webpack-pluginがエラーになりビルドが失敗する際の対応

Next.jsエラー解消webpack
Next.js10系でビルド時にterser-webpack-pluginがエラーになりビルドが失敗する際の対応
Memo

Next.js10系でビルド時にterser-webpack-pluginがエラーになりビルドが失敗する際の対応についてメモしました。

経緯

Nextで作成したアプリのバージョンを10へあげてproductionビルドを実行した際に
エラーになりビルドが通らなくなってしまったことがきっかけでした。

環境

  • next 10.2.3
  • node 14.15.3

発生したエラー

next buildを実施した際に'javascript' of undefinedというエラーが発生しました。

> Build error occurred
TypeError: Cannot read property 'javascript' of undefined

実行ログ

実行時の全体のログになります。

$ 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を利用するためには フラグの変更が必要なことがわかりました。

info  - 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.js
module.exports = { future: { webpack5: true } }

再度ビルドを実行して確認

再度next buildコマンドでビルドを実行して確認します。

$ 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プラグインの場合下記のような形でインストールし直すことでも
エラーを解消することができました。

$ 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が有効になるようです。

参考文献

終わりに

最後までご覧いただきありがとうございます。
この記事ではNext.js10系でビルド時にterser-webpack-pluginがエラーになりビルドが失敗する際の対応について紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。