Closed2

Webpack build Error

まさきちまさきち

EC2環境で、Webpackでbuild Errorが発生。
webpackでchunkファイル(バンドルした後に出力されるもの)のf752547.jsが重複しているとのこと。

ERROR in chunk components/atoms-app-basic
f752547.js
Conflict: Multiple chunks emit assets to the same filename f752547.js (chunks 139 and 246)

 FATAL  Nuxt build error                       22:27:51

 at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:2127:21)
 at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2076:5)
 at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:5)
 at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:110:7)
 at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)


  ╭─────────────────────────────╮
  │               │
  │  ✖ Nuxt Fatal Error    │
  │               │
  │  Error: Nuxt build error  │
  │               │
  ╰─────────────────────────────╯

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wedding-box@1.0.0 build: `nuxt build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the wedding-box@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!   /home/ar-admin/.npm/_logs/2024-04-02T13_27_51_888Z-debug.log
まさきちまさきち

解決策

以下の二つを組み合わせて、ファイル名を一意の文字列にするように修正。
[contenthash] -> ファイルごとに生成される一意の文字列
[name] -> バンドルするエントリーポイント名

// config.optimization.minimize = false;
      if (config.output) {
        // チャンクファイル名の設定
        config.output.chunkFilename = 'js/[name].[contenthash].js'
}

https://webpack.js.org/configuration/output/#outputfilename

https://zenn.dev/msy/articles/672488b7ed28a9

https://zenn.dev/praha/articles/ca9c6bd66cbf41

このスクラップは28日前にクローズされました