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

> meinerstesprojekt@0.1.0 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

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

Version

Environment info

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

The text was updated successfully, but these errors were encountered:

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

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

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.

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.

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.

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 🙂

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

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

The absolute path of your project

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.

This helps me a lot. Thanks Sir

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

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.

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

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

Version

Environment info

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

The text was updated successfully, but these errors were encountered:

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

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

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.

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.

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.

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 🙂

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

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

The absolute path of your project

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.

This helps me a lot. Thanks Sir

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

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.

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

WARNING in Conflict: Multiple assets emit different content to the same filename 3rdpartylicenses.txt #16193

Command (mark with an x )

Is this a regression?

Description

The following warning appears on production builds:

🔬 Minimal Reproduction

• clone https://github.com/johannesjo/super-productivity
• update to latest CLI, FW, and Material
• add the following ngcc.onfig.js

🔥 Exception or Error

🌍 Your Environment

The text was updated successfully, but these errors were encountered:

The LicenseWebpackPlugin (https://github.com/xz64/license-webpack-plugin) emits the 3rdpartylicenses.txt file. The plugin uses the webpack compilation hook optimizeChunkAssetwhich can be called multiple times within a single compilation. (code: https://github.com/xz64/license-webpack-plugin/blob/master/src/WebpackCompilerHandler.ts#L27) This is the source of the multiple license assets. One case of this hook being called multiple times is the presence of stylesheets within the projects styles option. The MiniCssExtractPlugin used to output the CSS appears to call the hook while extracting the stylesheets from the internal webpack javascript variant of the stylesheet.

The emit hook would most likely be the more appropriate hook to use as this is called once at the completion of the compilation to output the files. This would necessitate a change to the plugin itself which is third-party.

An alternative could be to switch plugins to https://github.com/microsoft/license-checker-webpack-plugin which uses the emit hook.

The most obvious fix would be to update license-webpack-plugin to use the emit hook, however this could have ripple effects for the rest of the repo. Even if we fix the problem there, it may take some time for a stable release which we can depend on, which likely won’t make the v9 release timeframe.

The other option would be to switch to Microsoft’s license-checker-webpack-plugin , though this is probably more overall effort and would probably make google3 integration harder (Edit: @angular-devkit/build-angular is not included in the g3 build pipeline).

Источник

Error: Conflict: Multiple chunks emit assets to the same filename ssr-bundle.js #29

Hi, I have encountered this problem when I was trying to create multiple html files with multiple entries.

I have tried below but doesnt make any difference.

The text was updated successfully, but these errors were encountered:

template: `!!prerender-loader?string!$/template.html` locates in production.config.js file

I think I found the issue, I was using os.tmpdir() , but had meant to use fs.mkdtempSync() .

@edwardfhsiao alright, I figured out the issue with the demo you linked above: it’s a duplicate of #25, and the solution I posted there a couple hours ago works here too:

@developit Awesome, that solved my problem. Really appreciate your help!

This issue may have to be looked at again. The error still occurs if using the <> in the template tag as specified in the docs:
https://github.com/GoogleChromeLabs/prerender-loader#injecting-content-into-the-html

I spent many hours trying to debug our config and was still getting the multiple chunks error until i realized this.

To replicate, replace the template.html file in the example repo (https://github.com/edwardfhsiao/prerender-loader-test-repo) with:

and run npm run compile or yarn compile .

It’s not clear where the formatting comes from, but using <> in the template as specified in the docs fails with multiple entry files.

Источник

Конфликт: несколько ресурсов отправляются в одно и то же имя файла

Я новичок в Webpack, который хочет узнать об этом все. Я столкнулся с конфликтом при запуске своего веб-пакета, который сказал мне:

ERROR in chunk html [entry] app.js Conflict: Multiple assets emit to the same filename app.js

Что мне делать, чтобы избежать конфликта?

Это мой webpack.config.js:

Я не совсем знаком с вашим подходом, поэтому я покажу вам общий способ помочь вам.

Прежде всего, на ваш output , вы указав filename на app.js что имеет смысл для меня , что выход все равно будет app.js . Если вы хотите сделать его динамичным, просто используйте «filename»: «[name].js» .

Эта [name] часть сделает имя файла динамическим для вас. Это цель вашего entry объекта. Каждый ключ будет использоваться как имя вместо расширения [name].js .

Во-вторых, вы можете использовать расширение html-webpack-plugin . Вам не нужно включать его как test .

У меня была такая же проблема, я обнаружил, что это установка статического имени выходного файла, которое вызывает мою проблему, в выходном объекте попробуйте следующий объект.

Это делает так, что имена файлов разные и не конфликтуют.

РЕДАКТИРОВАТЬ: Одна вещь, которую я недавно обнаружил, заключается в том, что вы должны использовать хеш вместо chunkhash при использовании перезагрузки HMR. Я не вникал в корень проблемы, но просто знаю, что использование chunkhash нарушает мою конфигурацию веб-пакета

Тогда должно работать нормально с HMR 🙂

ИЗМЕНИТЬ июль 2018 г .:

Еще немного информации об этом.

Хеш. Это хэш, который генерируется каждый раз при компиляции webpack. В режиме разработки он хорош для очистки кеша во время разработки, но не должен использоваться для длительного кеширования ваших файлов. Это перезапишет хэш при каждой сборке вашего проекта.

Chunkhash Если вы используете это в сочетании с фрагментом времени выполнения, вы можете использовать его для долгосрочного кэширования, фрагмент времени выполнения увидит, что изменилось в вашем исходном коде, и обновит хэши соответствующих фрагментов. Он не будет обновлять другие, позволяя кэшировать ваши файлы.

Источник

module.exports = {
  context: __dirname + "/app",

  entry: {
    'javascript': "./js/app.js",
    'html': "./index.html",
  },
  output: {
    path: __dirname + "/dist",
    filename: "app.js",
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"]
      },
      {
        test: /.html$/,
        loader: "file-loader?name=[name].[ext]",
      }
    ]
  }
};

9 Answers

output:{
        filename: '[name].js',
        path: __dirname + '/build',
        chunkFilename: '[id].[chunkhash].js'
    },

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash:8].js',
  sourceMapFilename: '[name].[hash:8].map',
  chunkFilename: '[id].[hash:8].js'
};

var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = { 
  entry: {
    javascript: './app/index.js',
  },  

  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },  

  module: {
    rules: [
      {   
        test: /.jsx?$/,
        exclude: [
          path.resolve(__dirname, '/node_modules/')
        ],  
        loader: 'babel-loader'
      },  
    ]   
  },  

  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },  

  plugins: [HTMLWebpackPluginConfig]
}

 output: {
    path:__dirname+'/dist/js',

    //replace filename:'app.js' 
    filename:'[name].js'
}

  plugins: [
   new CopyPlugin({
      patterns: [
        {
          from: "./src/academy/templates",
          globOptions: {
            ignore: ["default.hbs"]
          }
        },
      ]
    }),
   ],

  plugins: [
   new CopyPlugin({
      patterns: [
        {
          from: "./src/academy/templates",
          globOptions: {
            ignore: ["**/default.hbs"]
          }
        },
      ]
    }),
   ],

"test": "cross-env BABEL_ENV=test CHROME_BIN=$(which chromium-browser) karma start --single-run"

 module.exports = {
  output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
  },
  ...
 }

if (process.env.BABEL_ENV === 'test') {
  module.exports.output.filename = '[name].[hash:8].js'
}

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    target: 'web',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    entry: {
        popup: './src/scripts/popup.tsx',
        options: './src/scripts/options.tsx',
    },
    context: path.join(__dirname),
    module: {
        rules: [
            {
                test: /.tsx?$/,
                loader: 'ts-loader',
            },
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ],
            },
            {
                test: /.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader',
                ],
            },
        ],
    },

    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.json', '.css'],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new CopyPlugin([
            { from: 'src/popup.html', to: 'popup.html' },
            { from: 'src/options.html', to: 'options.html' },
            { from: 'src/manifest.json', to: 'manifest.json' },
            { from: 'src/icons', to: 'icons' },
        ]),
        new HtmlWebpackPlugin({
            template: path.join("src", "popup.html"),
            filename: "popup.html",
            chunks: ["popup"]
        }),
        new HtmlWebpackPlugin({
            template: path.join("src", "options.html"),
            filename: "options.html",
            chunks: ["options"]
        }),
    ]
};

            { from: 'src/popup.html', to: 'popup.html' },
            { from: 'src/options.html', to: 'options.html' },