ERROR in Cannot read properties of undefined (reading 'attribs')

[tengweiherr]

Bug report

What is the current behavior?
This error happens when I am migrating my project from Webpack 4 to Webpack 5.
I do follow the guide on Webpack: To v5 from v4 but I can't find any similar issue anywhere else in the internet.

[0] ERROR in Cannot read properties of undefined (reading 'attribs')
[0] 
[0] webpack 5.75.0 compiled with 1 error in 25450 ms

My config file

const mode: webpack.Configuration['mode'] = ENV !== 'dev' ? 'production' : 'development'
const target: webpack.Configuration['target'] = 'web'
const entry: webpack.Entry = { app: './src/app/index.tsx' }

export const config: webpack.Configuration = {
  mode,
  output: {
    path: path.resolve(process.cwd(), 'build'),
    filename: '[name]-[contenthash].js',
    chunkFilename: '[name]-[contenthash]-chunk.js',
    publicPath: '',
  },
  devtool: ENV !== 'dev' ? 'source-map' : 'cheap-module-source-map',
  target,
  entry,
  resolve:{
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.styl', '.ico', '.svg'],
    mainFields: ['browser', 'main'],
  },
  optimization: {
    splitChunks: { chunks: 'all' },
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
  module: { rules },
  plugins: Array.from(plugins.values()),
  devServer: {
    port: 9001,
    compress: true,
    historyApiFallback: true,
  }
}

My css rule setting

export const style: webpack.RuleSetRule[] = [
  {
    enforce: 'pre',
    test: [/\.styl$/],
    use: ['stylus-loader'],
  },
  {
    test: [/\.module.(css|styl)$/],
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: ENV === 'prod' ? '[contenthash]' : '[name]__[local]___[contenthash]',
          },	
        },
      },
    ],
  },
  {
    test: [/^((?!module).)*\.(css|styl)$/, /\.css$/i],
    use: ['css-loader'],
  },
  {
    enforce: 'post',
    test: [/\.(css|styl)$/],
    use: ENV === 'prod' ? MiniCssExtractPlugin.loader : 'style-loader',
  },
]

My other dependencies related to webpack

 {
    "@svgr/webpack": "^6.2.1",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^2.0.1",
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "file-loader": "^6.2.0",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.0.0",
    "json-loader": "^0.5.7",
    "mini-css-extract-plugin": "^2.0.0",
    "react-docgen-typescript-loader": "^3.7.2",
    "react-docgen-typescript-webpack-plugin": "^1.1.0",
    "style-loader": "^3.3.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "svg-inline-loader": "^0.8.0",
    "svgo-loader": "^2.2.0",
    "ts-loader": "^9.4.2",
    "ts-node": "^8.0.2",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack-bundle-analyzer": "^4.7.0",
    "webpack-dev-server": "^4.11.1"
    "inline-source-webpack-plugin": "^3.0.1",
    "lodash-webpack-plugin": "^0.11.6",
    "node": "^16.18.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-loadable": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
  }

What is the expected behavior?

Other relevant information:
webpack version: v5.75.0
Node.js version: v16.18.1
Operating System: macOS Ventura 13.0.1 (22A400)

[alexander-akait]

Sound like a bug in plugin, check your have the latest version of all plugins, especial html-webpack-plugin, also can you show stack trace?