Breaking change with import via CommonJS in 2.5.0

[Cherry]

Bug report

Since 2.5.0, importing via CommonJS no longer matches what it did in the past, or what is shown in the documentation.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
console.log(MiniCssExtractPlugin);

{
  default: [class MiniCssExtractPlugin] {
    loader: 'E:\\GitHub\\website\\node_modules\\mini-css-extract-plugin\\dist\\loader.js'
  },
  pluginName: 'mini-css-extract-plugin',
  pluginSymbol: Symbol(mini-css-extract-plugin)
}

Actual Behavior

new MiniCssExtractPlugin()

This throws a TypeError: MiniCssExtractPlugin is not a constructor when attempting to use in the documented way. Using the exported .default works fine, but I assume is not the intended behaviour.

Expected Behavior

It should behave exactly as it did in 2.4.6 and below. This is likely the result of the change to the main export in 5b5654c#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L14, and the deletion of the src/cjs.js script and its build.

Previously in 2.4.6:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
console.log(MiniCssExtractPlugin);

[class MiniCssExtractPlugin] {
  loader: 'E:\\GitHub\\website\\node_modules\\mini-css-extract-plugin\\dist\\loader.js'
}

[RatherLogical]

A temporary workaround is this usage:

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

[KennethJoris]

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

[pencil]

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"
  }

[ghost]

I've tried the resolutions method (npm), and it usually works in every situation. But not here. I had to take a different approach for our deployments to succeed.

package.json (added node preinstallHotfix)

  "scripts": {
    "preinstall": "npx npm-force-resolutions && node preinstallHotfix",

preinstallHotfix.js

// temp patch breaking change
// https://github.com/webpack-contrib/mini-css-extract-plugin/issues/896

const fs = require("fs")

const file = "./node_modules/react-scripts/config/webpack.config.js"

console.log(
  "Applying hotfix for https://github.com/webpack-contrib/mini-css-extract-plugin/issues/896..."
)

fs.readFile(file, "utf8", function (err, data) {
  if (err) {
    return console.log(err)
  }
  const result = data.replace(
    "require('mini-css-extract-plugin');",
    "require('mini-css-extract-plugin').default;"
  )

  fs.writeFile(file, result, "utf8", function (err) {
    if (err) return console.log(err)
  })
})

[jsg2021]

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)
 }

[jonshipman]

Breaks @wordpress/scripts

[AviVahl]

@alexander-akait this regressed with #895
removing the cjs entry is a breaking change, as it changes the shape of the library completely.

[streetguy911]

@alexander-akait this regressed with #895 removing the cjs entry is a breaking change, as it changes the shape of the library completely.

yeah, such change definitely should not come with minor version update

[jsg2021]

@alexander-akait this regressed with #895 removing the cjs entry is a breaking change, as it changes the shape of the library completely.

yeah, such change definitely should not come with minor version update

Guys, it looks like a minor mistake. They did not intend to change the shape of the module.

[bencresty]

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

Going back to 2.4.5 now until this is fixed.

[drewwills]

We also had this issue and pegged the version at 2.4.7 to solve it.

[dilyanpalauzov]

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.

[alexander-akait]

WIP, sorry for bug, my mistake

[xavierfoucrier]

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

[alexander-akait]

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

[alexander-akait]

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

[martinpitt]

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

[alexander-akait]

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

[ghost]

Thanks @alexander-akait

[zubin-madon]

A temporary workaround is this usage:

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

I did the above, however now I am facing a problem further down into the code.
loader: MiniCssExtractPlugin.default.loader,
TypeError: Cannot read property 'default' of undefined

[alexander-akait]

@zubin-madon Please remove default #896 (comment)

[zubin-madon]

This worked for me. I replace ^ with ~
Tyvm.