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

参考文献

Webpack 5 Adoption｜Next.js

nextjs.org