Vue version 5.0.1. After downloading, run NPM run serve to report an error

[PKXZ]

Version

5.0.1

Environment info

node-v14.19.0-x64
vue cli 5.0.1
vue 2.6.14

Steps to reproduce

Follow the normal installation steps, and then report an error when running NPM run serve: Conflict: Multiple assets emit different content to the same filename index. html ERROR in Conflict: Multiple assets emit different content to the same filename index. html webpack compiled with 1 error

What is expected?

How to solve it?

What is actually happening?

Conflict: Multiple assets emit different content to the same filename index.html ERROR in Conflict: Multiple assets emit different content to the same filename index.html webpack compiled with 1 error

[kuxia]

Have you solved the problem? 问题解决了吗？

[squivix]

Same problem with @vue/cli 5.0.1, Node v14.17.5, vue 3.2.13, and npm 7.20.6

Edit: Downgraded to @vue/cli 4.5.15, works now

[dwirifki10]

Same problem with @vue/cli 5.0.1, Node v14.17.5, vue 3.2.13, and npm 7.20.6

Edit: Downgraded to @vue/cli 4.5.15, works now

it works. thank you.

[GustinLau]

May be your project path has a special symbol like '(' or ')'. I'm not sure if it's a bug of copy-webpack-plugin or fast-glob, because cli will add the absolute path of the index.html in the public folder to the ignore list, if the path has a special symbol, copy-webpack-plugin will not match the path and will not ignore it. Therefore index.html will emit twice. You can rename your project path or add follow code in chainWebpack function to solve it.

config.plugin('copy').tap(args => {
    const UNESCAPED_GLOB_SYMBOLS_RE = /(\\?)([()*?[\]{|}]|^!|[!+@](?=\())/g;
    const publicDir = path.resolve(process.VUE_CLI_SERVICE.context, 'public').replace(/\\/g, '/');
    const escapePublicDir= publicDir.replace(UNESCAPED_GLOB_SYMBOLS_RE, '\\$2');
    args[0].patterns[0].globOptions.ignore = args[0].patterns[0].globOptions.ignore.map(i => i.replace(publicDir, escapePublicDir));
    return args;
});

[squivix]

May be your project path has a special symbol like '(' or ')'

tested with and without parenthesis in path. You are correct. This is seems to be the problem.

[Luiz-Soft]

May be your project path has a special symbol like '(' or ')' You are absolutely correct! I solved this problem by removing parentesis from the path. Thank you :)

[RedPadWeb]

@Luiz-Soft which path bro please help i am also facing this kind of problem

[GustinLau]

@Luiz-Soft which path bro please help i am also facing this kind of problem

The absolute path of your project

[AndyLab9596]

May be your project path has a special symbol like '(' or ')'. I'm not sure if it's a bug of copy-webpack-plugin or fast-glob, because cli will add the absolute path of the index.html in the public folder to the ignore list, if the path has a special symbol, copy-webpack-plugin will not match the path and will not ignore it. Therefore index.html will emit twice. You can rename your project path or add follow code in chainWebpack function to solve it.

config.plugin('copy').tap(args => {
    const UNESCAPED_GLOB_SYMBOLS_RE = /(\\?)([()*?[\]{|}]|^!|[!+@](?=\())/g;
    const publicDir = path.resolve(process.VUE_CLI_SERVICE.context, 'public').replace(/\\/g, '/');
    const escapePublicDir= publicDir.replace(UNESCAPED_GLOB_SYMBOLS_RE, '\\$2');
    args[0].patterns[0].globOptions.ignore = args[0].patterns[0].globOptions.ignore.map(i => i.replace(publicDir, escapePublicDir));
    return args;
});

This helps me a lot. Thanks Sir

[webdevnerdstuff]

This problem occurs in vue-cli v5.0.8 as well. Removing the parenthesis also removes the issue with this version.

[danniehansen]

Got the same issue. Unfortunately, I don't have any parenthesis in my path. Any recommendations on what to do? I cannot really downgrade as lower versions bring with them a lot of vulnerabilities in dependencies.

[goodrufu]

Do you use the html-webpack-plugin plugin？I encountered the same problem using the pages of Vuecli, which comes with the plugin.Just delete the reference to this plugin.