[webpack-cli] Error: Prevent writing to file that only differs in casing or query string from already written file. This will lead to a race-condition and corrupted files on case-insensitive file systems.

[sandeshsoni]

Describe the bug

I get an error message saying app.js file is twice but I do not see it.

node -v v16.5.0

What is the current behavior?
It gives this error message.
I had upgraded packages and also upgaded webpack as I was getting some messages.

To Reproduce

npm run deploy

Steps to reproduce the behavior:

Expected behavior
npm run deploy must be successful.

Screenshots

➜  assets git:(sandesh-wip-b4reinstall) ✗ npm run deploy
> deploy
> webpack --mode production
[webpack-cli] Error: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.
/Users/sandeshsoni/Projects/my_project/src/elixir/apps/frontend/priv/static/js/app.js
/Users/sandeshsoni/Projects/my_project/src/elixir/apps/frontend/priv/static/js/app.js
    at checkSimilarFile (/Users/sandeshsoni/Projects/my_project/src/elixir/apps/frontend/assets/node_modules/webpack/lib/Compiler.js:637:11)
    at writeOut (/Users/sandeshsoni/Projects/my_project/src/elixir/apps/frontend/assets/node_modules/webpack/lib/Compiler.js:819:11)
    at /Users/sandeshsoni/Projects/my_project/src/elixir/apps/frontend/assets/node_modules/webpack/lib/util/fs.js:227:5
    at FSReqCallback.oncomplete (node:fs:185:23)
    

Additional context

similar webpack/webpack#11894

maybe if there is a proper configured webpack and package json I can refer to for syntax...

[sandeshsoni]

webpack config

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {
    optimization: {
      minimize: true,
      minimizer: ['...', new CssMinimizerPlugin()]
    },
    entry: {
      app: glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'
    },
    devtool: devMode ? 'source-map' : undefined,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.[s]?css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
        },
        {
          test: /\.svg$/i,
          type: 'asset/inline',
        },
        {
          test: /\.(png|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: '../css/app.css' }),
      new CopyWebpackPlugin({
        patterns: [{ from: '../priv/static/', to: '../' }]
      }),
    ]
  }
};

[alexander-akait]

Please read the error message:

[webpack-cli] Error: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.

You have the same assets with different content, i.e. twi app.js, one from copy-webpack-plugin due '../priv/static/' and second from webpack itself, you copy old js using copy-webpack-plugin file and generate the new using webpack, sorry we can't fix it here.