Vue js npm run build error in bundle.css Conflict: Multiple chunks emit assets to the same filename bundle.css (chunks app and chunk-f33d301e)

Question

If I uncomment the below css extracting method in the vue.config.js file and run build for production. I am getting the above mentioned error.

// vue.config.js file

// uncomment before executing 'npm run build'
    css: {
        extract: {
          filename: 'bundle.css',
          chunkFilename: 'bundle.css',
        },
    }

Am I supposed to pass the filename as variable. But these are default template code for extracting css during production build.

Answer 1

Try renaming the chunkFilename to eg just "bundle", because otherwise, the extracted CSS file and the chunkFile have the same file name.