Laravel-mix: Webpack Error - "Multiple assets emit to the same filename"

[paulredmond]

• Laravel Mix Version: 4.1.4
• Node Version (node -v): v10.16.0
• NPM Version (npm -v): 6.9.0
• OS: OS X High Sierra

Description:

__Edit: looks like a possible upstream issue. See also:__ webpack/webpack#9692 and webpack/webpack#9695.

When running npm run dev or npm run production I am getting the following error when trying to compile SCSS for Font Awesome 5:

__Error: Conflict: Multiple assets emit to the same filename__ fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?aa66d0e0e38c75666e98db33abae955e

/Users/predmond/code/sandbox/mixtest/node_modules/webpack/lib/Compilation.js:1994
                throw new Error(
                ^

Error: Conflict: Multiple assets emit to the same filename fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?aa66d0e0e38c75666e98db33abae955e
    at Compilation.emitAsset (/Users/predmond/code/sandbox/mixtest/node_modules/webpack/lib/Compilation.js:1994:11)
    at Compilation.createModuleAssets (/Users/predmond/code/sandbox/mixtest/node_modules/webpack/lib/Compilation.js:2075:11)
    at hooks.optimizeTree.callAsync.err (/Users/predmond/code/sandbox/mixtest/node_modules/webpack/lib/Compilation.js:1375:9)
    at _err0 (eval at create (/Users/predmond/code/sandbox/mixtest/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at _async2.default.forEach.err (/Users/predmond/code/sandbox/mixtest/node_modules/extract-text-webpack-plugin/dist/index.js:296:11)
    at /Users/predmond/code/sandbox/mixtest/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/predmond/code/sandbox/mixtest/node_modules/async/dist/async.js:1064:13)
    at /Users/predmond/code/sandbox/mixtest/node_modules/async/dist/async.js:969:16
    at _async2.default.forEach.err (/Users/predmond/code/sandbox/mixtest/node_modules/extract-text-webpack-plugin/dist/index.js:274:13)
    at /Users/predmond/code/sandbox/mixtest/node_modules/async/dist/async.js:473:16
    at iteratorCallback (/Users/predmond/code/sandbox/mixtest/node_modules/async/dist/async.js:1064:13)
    at /Users/predmond/code/sandbox/mixtest/node_modules/async/dist/async.js:969:16
    at compilation.rebuildModule.err (/Users/predmond/code/sandbox/mixtest/node_modules/extract-text-webpack-plugin/dist/index.js:261:26)
    at callback (/Users/predmond/code/sandbox/mixtest/node_modules/webpack/lib/Compilation.js:1204:5)
    at processModuleDependencies.err (/Users/predmond/code/sandbox/mixtest/node_modules/webpack/lib/Compilation.js:1227:5)
    at process._tickCallback (internal/process/next_tick.js:61:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ production 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/predmond/.npm/_logs/2019-09-12T22_47_26_197Z-debug.log

Steps To Reproduce:

I created a test repository with a fresh Laravel 6.0 installation and the Font Awesome dependency that should be reproducible.

git clone [email protected]:paulredmond/laravelmix-test.git
cd laravelmix-test
npm install
npm run production

The only modification I made was adding the font awesome NPM dependency and the resources/sass/app.scss:

@import url('https://fonts.googleapis.com/css?family=Nunito');

// External Packages
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

[paulredmond]

I was also able to reproduce this with another project using datatables and importing the CSS from that module. This issue is super weird.

@import '~datatables/media/css/jquery.dataTables.css';

[thecrypticace]

Webpack update caused this: https://github.com/webpack/webpack/commit/758269e81456c946a96b521ee936dbec99d07132

mix.options({ processCssUrls: false })

to work around issue

[paulredmond]

Thanks for the info @thecrypticace. From the link you shared this was my temporary workaround for anyone else facing this issue:

npm install [email protected]
rm -rf node_modules
npm install
npm run production

[HDVinnie]

Also facing this issue. Thanks for the workaround.

[sokra]

webpack v4.40.1 should fix the problem

[Saran010]

webpack v4.40.1 should fix the problem

@sokra Thx, you really helped me

[michaeldyrynda]

Can confirm updating webpack fixed 👍

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.