TypeError: MiniCssExtractPlugin is not a constructor

Bug report

When trying to run my webpack.config,js and i try to call MiniCssExtractPlugin i get an error saying TypeError: MiniCssExtractPlugin is not a constructor.

i have looked around and see most people have this issue, but it was fixed. however i am using the latest version of MiniCssExtractPlugin (2.7.0) and i still get this issue

Actual Behavior

the script hangs on calling MiniCssExtractPlugin.

Expected Behavior

my script should build like normal

How Do We Reproduce?

heres my package.json and my webpack.config https://pastebin.com/xk3u0tqC https://pastebin.com/BGpiKtBq

Please paste the results of npx webpack-cli info here, and mention other relevant information

Memory: 5.52 GB / 15.89 GB Binaries: Node: 18.12.1 - C:\Program Files\nodejs\node.EXE npm: 9.1.2 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.22621.819.0), Chromium (107.0.1418.56) Internet Explorer: 11.0.22621.1 Packages: babel-loader: ^8.1.0 => 8.3.0 css-loader: ^6.7.2 => 6.7.2 postcss-loader: ^3.0.0 => 3.0.0 sass-loader: ^13.2.0 => 13.2.0 style-loader: ^0.23.1 => 0.23.1 webpack: ^5.75.0 => 5.75.0 webpack-cli: ^5.0.0 => 5.0.0 webpack-dev-server: ^3.10.3 => 3.11.3

[alexander-akait]

Please read how ESM modules works, you have:

1. Mixed module type import (ESM) and module.exports (CommonJS) in webpack.config.js
2. Because of import * as MiniCssExtractPlugin from 'mini-css-extract-plugin'; you should use const extractSASS = new MiniCssExtractPlugin.default({filename: "app.min.css"});
3. You should use type: "module" or .mjs extension

If you will use ESM you can’t use __dirname or __filename, you have import.meta.url

Sorry, no problem with plugin itself here, feel free to feedback

[LithRakoon]

https://github.com/LithRakoon/npm

run npm i npm run build and itll give the error