mini-css-extract-plugin: Breaking change with import via CommonJS in `2.5.0`

Please try https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v2.5.1, yes, it was bug, we should not export default, it was because i forgot to change export on module.exports when added types

A temporary workaround is this usage:

const MiniCssExtractPlugin = require("mini-css-extract-plugin").default;

WIP, sorry for bug, my mistake

We will fix it soon.

Yeah, according to npm statistics, I own about 8 packages of 100 top (it is very important for all JS community), so I assigned 2 independent (and trusted) persons in the event that I cannot continue support for reasons beyond my control

Guys, it’s open source. Relax and be patient. Take some coffee ☕ ✌️ Thanks @alexander-akait for your work 😎

Many thanks @alexander-akait for the fast fix, and for providing one of these pieces which holds the internet together! ⭐

19 persons are listening here to get update, once the problem is fixed.

Please refrain from all “Me too” comments, as these 19 persons are not interested in them. Please discuss only proposed fixes.

For anyone else running into this with an app created via create-react-app, add this to your package.json and then run yarn install again.

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

And please do not use default workaround, it can lead to more problems, just update to v2.5.1 and return original setup

Breaks @wordpress/scripts

More details in https://github.com/WordPress/gutenberg/issues/37992.

It would be great to publish 2.5.1 with the change impacting CommonJS usage reverted and then publish 3.0.0. This would ensure that so many projects don’t have to pin previous versions or update the current usage as a hotfix.

Confirmed; same issue here; 2.5.0 breaks existing working webpack config:

Going back to 2.4.5 now until this is fixed.

Any status on the fix ? A lot of CI servers install react native CRA and npm run build their apps. All broken now…

A temporary workaround is this usage:

const MiniCssExtractPlugin = require("mini-css-extract-plugin").default;

If i apply this workaround and perform the webpack build command to create a production build, i get this error:

[webpack-cli] ModuleNotFoundError: Module not found: Error: path argument is not a string
    at /Users/XXX/Sites/webPacker/node_modules/webpack/lib/Compilation.js:2011:28
    at /Users/XXX/Sites/webPacker/node_modules/webpack/lib/NormalModuleFactory.js:795:13
    at eval (eval at create (/Users/XXX/Sites/webPacker/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
    at /Users/XXX/Sites/webPacker/node_modules/webpack/lib/NormalModuleFactory.js:275:22
    at eval (eval at create (/Users/XXX/Sites/webPacker/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at /Users/XXX/Sites/webPacker/node_modules/webpack/lib/NormalModuleFactory.js:538:15
    at /Users/XXX/Sites/webPacker/node_modules/webpack/lib/NormalModuleFactory.js:124:11
    at /Users/XXX/Sites/webPacker/node_modules/webpack/lib/NormalModuleFactory.js:609:8
    at /Users/XXX/Sites/webPacker/node_modules/neo-async/async.js:2830:7
    at done (/Users/XXX/Sites/webPacker/node_modules/neo-async/async.js:2925:13)

Running webpack in development mode does seem to work.

My workaround was to change the package.json version from: "mini-css-extract-plugin": "^2.4.5" to "mini-css-extract-plugin": "~2.4.5" (replaced ^ symbol with ~) delete lock file, delete node_modules and re-install

@zubin-madon Please remove default https://github.com/webpack-contrib/mini-css-extract-plugin/issues/896#issuecomment-1014461012

Thanks @alexander-akait

same issue const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’); … new MiniCssExtractPlugin({ ^ TypeError: MiniCssExtractPlugin is not a constructor …

Probably a minor mistake. Should be fixed this week, and fast as usual 👍

@snitin315 did you published 5 over 4.2.5? cause now I see that even installing 2.4.5 manually does not work anymore for CRA.

It looks like the export signature got double applied? with a default.default

its also broken with importing from an mjs file… (node 17)

import * as test from 'mini-css-extract-plugin'
console.log(test);

[Module: null prototype] {
   __esModule: true,
   default: {
     default: [class MiniCssExtractPlugin] {
       loader: '/home/jonathan/Workspace/wb/wb-hub/node_modules/mini-css-extract-plugin/dist/loader.js'
     },
     pluginName: 'mini-css-extract-plugin',
     pluginSymbol: Symbol(mini-css-extract-plugin)
   },
   pluginName: 'mini-css-extract-plugin',
   pluginSymbol: Symbol(mini-css-extract-plugin)
 }