MiniCssExtractPlugin is not a constructor

I created a fresh create-react-app template and built the project with npm run build command and got this error. I ejected react-scripts and i looked for reason why it isn't it building, but i didn't find anything. i've fixed css files imports in components. node version 16.13.2, npm version 8.1.2

/home/pawel/projekty/hashcode/config/webpack.config.js:623
        new MiniCssExtractPlugin({
        ^

TypeError: MiniCssExtractPlugin is not a constructor
    at module.exports (/home/pawel/projekty/hashcode/config/webpack.config.js:623:9)
    at Object.<anonymous> (/home/pawel/projekty/hashcode/scripts/build.js:51:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47

and this is ejected webpack config https://github.com/PSmigielski/hashcode/blob/master/config/webpack.config.js


This seems to be a new issue that came out recently and an issue has been opened with the create-react-app repository.

https://github.com/facebook/create-react-app/issues/11930

The two workarounds right now seem to be these

1.) Pinning the mini css extract version:

npm i -D --save-exact [email protected]

2.) Adding a resolutions to the package.json works as well:

"resolutions": {
   "mini-css-extract-plugin": "2.4.5"
}