I am currently moving some legacy jQuery project to be bundled with Webpack 5.

Building the project works but only if I remove the webpack folder before like so:

rm -rf src/dist && npm run build

Working on the project in watch-mode does not work at all though.

Trying to build the project without removing the folder first or trying to do npm run watch leads to the same error:

/webpack/node_modules/webpack/lib/stats/DefaultStatsPrinterPlugin.js:1248
                return match.replace(content, format(content));
                             ^

RangeError: Invalid string length
    at String.replace (<anonymous>)
    at /Users/Sites/webpack/node_modules/webpack/lib/stats/DefaultStatsPrinterPlugin.js:1248:18
    at String.replace (<anonymous>)
    at Object.formatError (/Users/Sites/webpack/node_modules/webpack/lib/stats/DefaultStatsPrinterPlugin.js:1247:22)
    at context.<computed> (/Users/Sites/webpack/node_modules/webpack/lib/stats/DefaultStatsPrinterPlugin.js:1323:35)
    at Object.error.message (/Users/Sites/webpack/node_modules/webpack/lib/stats/DefaultStatsPrinterPlugin.js:590:48)
    at /Users/Sissi/Sites/wildweiss/webpack/node_modules/webpack/lib/stats/DefaultStatsPrinterPlugin.js:1332:29
    at Hook.eval [as call] (eval at create (/Users/Sites/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at Hook.CALL_DELEGATE [as _call] (/Users/Sites/webpack/node_modules/tapable/lib/Hook.js:14:14)
    at /Users/Sites/webpack/node_modules/webpack/lib/stats/StatsPrinter.js:183:9

This is my webpack.config.js

module.exports = {
    entry: './src/app.js',
    mode: 'development',
    output: {
        path: `${__dirname}/src/dist`,
        filename: 'bundle.js',
    publicPath: '',
    },
    stats: {
        colors: true,
      modules: true,
        reasons: true,
        errorDetails: true,
    },
    devtool: 'source-map',
  devServer: {
    static: './src'
  },
    module: {
        rules: [
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                type: 'asset',
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    sources: false,
                },
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
                type: 'asset/resource',
            },
            { test: /\.(md|php|txt)$/, loader: 'ignore-loader' },
            { test: /LICENSE|VERSION|COMMITMENT$/, loader: 'ignore-loader' },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }, 
                    }
                ],
            },
        ],
    },
};

This is my package.json

  {
  "name": "Some random website",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack serve --open",
    "build": "webpack"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.0.0",
    "jquery": "^3.5.1"
  },
  "devDependencies": {
    "css-loader": "^6.6.0",
    "html-loader": "^3.1.0",
    "ignore-loader": "^0.1.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

edit:

if I set

stats: 'none'

I get

/Users/Sissi/Sites/wildweiss/webpack/node_modules/webpack/lib/Compilation.js:4633
                                if (!inTry) throw err;

so nothing is won.