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

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