解決:Error: Conflict: Multiple assets emit to the same filename *** の対応方法

先日アプリケーション開発していたころ npm のホットリロードがバグってコードを修正するたびにこのエラーが吐かれるので、コード修正→手動でビルドコマンドといったかなり作業効率が悪くなっていました。

ぐぐってもめんどそうだった上、ちょっと効率悪い解決方法ばかりだったので、備忘録がてらまとめておきました。

開発環境(フロント)

Vue アプリケーションで、フレームワークには Nuxt、そして Typescript を導入しています。

エラー内容:Error: Conflict: Multiple assets emit to the same filename ***

ターミナルではこんな感じです。


 ERROR  Error: Conflict: Multiple assets emit to the same filename ad1414aa41df24fa5485.hot-update.json                                                                                             16:05:48
    at Compilation.emitAsset (/Users/anonymous/Projects/unnamed/webfront/node_modules/webpack/lib/Compilation.js:1994:11)
    at compile (/Users/anonymous/Projects/unnamed/webfront/node_modules/webpack/lib/Compiler.js:333:28)
    at hooks.afterCompile.callAsync.err (/Users/anonymous/Projects/unnamed/webfront/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/anonymous/Projects/unnamed/webfront/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/anonymous/Projects/unnamed/webfront/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/Users/anonymous/Projects/unnamed/webfront/node_modules/webpack/lib/Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/anonymous/Projects/unnamed/webfront/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/anonymous/Projects/unnamed/webfront/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (/Users/anonymous/Projects/unnamed/webfront/node_modules/webpack/lib/Compilation.js:1404:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/anonymous/Projects/unnamed/webfront/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/anonymous/Projects/unnamed/webfront/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (/Users/anonymous/Projects/unnamed/webfront/node_modules/webpack/lib/Compilation.js:1395:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/anonymous/Projects/unnamed/webfront/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/anonymous/Projects/unnamed/webfront/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.additionalAssets.callAsync.err (/Users/anonymous/Projects/unnamed/webfront/node_modules/webpack/lib/Compilation.js:1390:36)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/anonymous/Projects/unnamed/webfront/node_modules/tapable/lib/HookCodeFactory.js:33:10), :6:1)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webfront@2.8.0 dev: `nuxt-ts`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webfront@2.8.0 dev 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!     /Users/anonymous/.npm/_logs/2019-09-26T07_05_48_289Z-debug.log

対応

Conflict: Multiple assets emit to the same filename *** とは言っているものの、スタックトレースを見る限り、node_modules 配下でおかしいことが起こっているようだったので、とりあえずモジュールを全削除しましょう。

あと、package-lock.json も削除します。←これ大事

package-lock.json は削除しないでね。

そんで、モジュールを再インストール。


$ npm install

解決

これでコードを修正するたびにビルドが走り、ストレスフリーなエンジニアリングができるようになりました。

めでたしめでたし。