1

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.

Grin
  • 557
  • 1
  • 6
  • 19
  • refer to https://stackoverflow.com/questions/42148632/conflict-multiple-assets-emit-to-the-same-filename?rq=1 for some reference. – V-Nayak Yuvraj Bhatt Sep 13 '19 at 07:16
  • oh my god it started happeing to me as well mines for nuxtjs and my images just outright stopped working with this same error! – Ninth Autumn Sep 13 '19 at 07:17
  • 1
    Webpack 4.40.0 was released 12 hours ago. 4.40.1 was released about 15 minutes ago with this error mentioned in the release notes. See https://github.com/webpack/webpack/releases/tag/v4.40.1 – skirtle Sep 13 '19 at 07:22

2 Answers2

1

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]" }
}
ischenkodv
  • 4,205
  • 2
  • 26
  • 34
0

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.

adlaws
  • 61
  • 4