CODEWITHSUNDEEP
vue.jswebpack
Grin
Grin

Reputation: 577

VueJS build started throwing Error: Conflict: Multiple assets emit to the same filename

My app used to work fine until I updated VueJS this morning. Now when I build, it shows the following error:

Error: Conflict: Multiple assets emit to the same filename img/default-contractor-logo.0346290f.svg

There's only one file like this in the repo.

Here's my vue.config.js:

module.exports = {
  baseUrl: '/my/',
  outputDir: 'dist/my',
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
          @import "@/scss/_fonts.scss";
        `
      }
    }
  },
  devServer: {
    disableHostCheck: true
  }
};

I tried webpack fixes recommended in similar cases, but non helped.

Upvotes: 1

Views: 1876

Answers (2)

adlaws
adlaws

Reputation: 61

The answer by @ischenkodv is definitely correct, but because of my inexperience with webpack, I needed a little more context to use the information to fix the problem.

For the benefit of anyone else in the same situation, I'm adding the following details which I hope will be useful.

This section of the Vue.js documentation was particularly helpul:

VueJS - Modifying Options of a Loader

For the TL;DR fix, here is the relevant chunk of my vue.config.js:

// vue.config.js
module.exports = {
    // ---snip---
    chainWebpack: config =>
    {
        config.module
            .rule('svg')
            .test(/\.svg$/)
            .use('file-loader')
            .tap(options =>
            {
                return { name: "[path][name].[ext]" };
            });
    }
    // ---snip---
};

In my project it was the flag-icon-css NPM package that was causing the Multiple assets emit to the same filename conflict errors. The above update to the vue.config.js file resolved the problem for me.

I suspect that the regular expression in the test could be tightened up to target just the items in the flag-icon-css package rather than matching all SVG files, but I haven't bothered since it's not causing any adverse effects so far.

Upvotes: 0

ischenkodv
ischenkodv

Reputation: 4255

I had the same error when importing SVG files using dynamically generated path in the require statement:

const url = require("../assets/svg/#{value}");
<img src={{url}} />

In this case file-loader processes all SVG files and saves them to the output path. My file-loader options were:

{
    loader: "file-loader",
    options: { name: "[name].[ext]" }
}

The folders structure has duplicate file names, something like this:

assets
|__ one
|____ file.svg
|__ two
|____ file.svg

In this case file-loader saves both file.svg files to the same output file: build/assets/file.svg - hence the warning.

I managed to fix it by adding [path] to the name option:

{
    loader: "file-loader",
    options: { name: "[path][name].[ext]" }
}

Upvotes: 1

Related Questions