CODEWITHSUNDEEP
node.jsvue.jsnpmassetsconflict
Markus330
Markus330

Reputation: 83

Vue.js - ERROR in Conflict: Multiple assets emit different content to the same filename index.html


if I create a new vue.js project on my macbook and compile it with "npm run serve", I get the following error.
I haven't changed any file since creating it. 

markus@Markuss-MBP meinerstesprojekt % npm run serve

> [email protected] serve
> vue-cli-service serve

 INFO  Starting development server...


 ERROR  Failed to compile with 1 error                                                                                                                                    6:12:51 PM

 error  

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

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})

module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(true)
}
}

package.json

{
  "name": "meinerstesprojekt",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "^5.0.1",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

npm version: 8.5.3
Node-Version: v16.14.0
Vue-Version: @vue/cli 5.0.1

The following folders are in the path:

├── README.md
├── babel.config.js
├── dist
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vue.config.js

Do you know why this doesn't work? Unfortunately, I couldn't find the solution by searching the web

Upvotes: 8

Views: 16041

Answers (7)

Lioanys López García
Lioanys López García

Reputation: 23

This solution worked for me: The folder path to my project had '(' and ')' I removed them and npm run serve works fine. Also the path have spaces ' ' but it doesn't matter.

Upvotes: 1

Donghwa Yang
Donghwa Yang

Reputation: 1

If you replace public/index.html with public/index2.html and run it, it will run well.

Upvotes: -1

Mitch Leo
Mitch Leo

Reputation: 41

I met the issue problem because of "(" and ")" in the path. Just remove parentheses from path.

Upvotes: 2

Artur Müller Romanov
Artur Müller Romanov

Reputation: 5791

My webpack.config.js file in the root folder looked like this and I had to comment out the HtmlWebpackPlugin declarations:

'use strict'
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: [
    './src/app.js'
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    // new HtmlWebpackPlugin({
    //   filename: 'index.html',
    //   template: 'index.html',
    //   inject: true
    // })
  ]
}

Then it worked.

Upvotes: 0

Eslam Adel
Eslam Adel

Reputation: 1189

i was having this issue because of the path to the project was having spaces in the folders name

so i renamed the paths to the project and it works

Example
from user/some path here/your-project-name
to user/somePathHere/your-project-name

and everything starts to work.

Upvotes: 12

Zest Zhang
Zest Zhang

Reputation: 69

Solution:

Step 1: Rename index.html to index.ejs;

Step 2: Add html: { template: './src/index.ejs' } to node_nodules/webpack/bin/webpack.js

The reason for the error may be: When the scaffolding was used to create a project, the names of multiple files were duplicated.

Upvotes: 5

Ahmed Emad
Ahmed Emad

Reputation: 14

When you hit vue create your-project-name Select ([Vue 3] babel,eslint) and try to npm run serve.

And also you can use vue ui to start a new project or import old one, and see everything about your project run in a GUI in your browser so you can figure out any problem.

Upvotes: -1

Related Questions