Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Breaking change with import via CommonJS in 2.5.0 #896

Closed
Cherry opened this issue Jan 14, 2022 · 33 comments · Fixed by #899
Closed

Breaking change with import via CommonJS in 2.5.0 #896

Cherry opened this issue Jan 14, 2022 · 33 comments · Fixed by #899

Comments

@Cherry
Copy link

Cherry commented Jan 14, 2022

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'
}
@Cherry Cherry changed the title Breaking change with import in 2.5.0 Breaking change with import via CommonJS in 2.5.0 Jan 14, 2022
@RatherLogical
Copy link

A temporary workaround is this usage:

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

@KennethJoris
Copy link

KennethJoris commented Jan 14, 2022

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
Copy link

pencil commented Jan 14, 2022

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
Copy link

ghost commented Jan 14, 2022

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
Copy link

jsg2021 commented Jan 14, 2022

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
Copy link

Breaks @wordpress/scripts

@AviVahl
Copy link

AviVahl commented Jan 14, 2022

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

@streetguy911
Copy link

@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
Copy link

jsg2021 commented Jan 15, 2022

@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.

utgwkk added a commit to kmc-jp/GodUploader-graphql that referenced this issue Jan 15, 2022
Eric-Guo added a commit to Eric-Guo/cybros_core that referenced this issue Jan 15, 2022
Eric-Guo added a commit to Eric-Guo/cybros_core that referenced this issue Jan 15, 2022
cexbrayat added a commit to cexbrayat/vue-cli that referenced this issue Jan 15, 2022
@bencresty
Copy link

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

image

Going back to 2.4.5 now until this is fixed.

@drewwills
Copy link

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

@dilyanpalauzov
Copy link

dilyanpalauzov commented Jan 17, 2022

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.

peterkeating added a commit to EtchUK/Etch.OrchardCore.ThemeBoilerplate that referenced this issue Jan 17, 2022
KKoukiou added a commit to M4rtinK/anaconda that referenced this issue Jan 17, 2022
@alexander-akait
Copy link
Member

WIP, sorry for bug, my mistake

@xavierfoucrier
Copy link

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

martinpitt added a commit to cockpit-project/starter-kit that referenced this issue Jan 17, 2022
peterkeating added a commit to EtchUK/Etch.OrchardCore.ThemeBoilerplate that referenced this issue Jan 17, 2022
@alexander-akait alexander-akait mentioned this issue Jan 17, 2022
6 tasks
srittau added a commit to srittau/hej that referenced this issue Jan 17, 2022
Pin mini-css-extract-plugin version. See
webpack-contrib/mini-css-extract-plugin#896.
@alexander-akait
Copy link
Member

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
Copy link
Member

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

@martinpitt
Copy link

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

@alexander-akait
Copy link
Member

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

M4rtinK pushed a commit to M4rtinK/anaconda that referenced this issue Jan 17, 2022
@ghost
Copy link

ghost commented Jan 17, 2022

Thanks @alexander-akait

@zubin-madon
Copy link

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
Copy link
Member

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

@zubin-madon
Copy link

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

aurelien-reeves added a commit to cucumber/html-formatter that referenced this issue Jan 25, 2022
* Update dependency mini-css-extract-plugin to v2.5.0

* Fix MiniCssExtractPlugin require issue

Refs. webpack-contrib/mini-css-extract-plugin#896

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: aurelien-reeves <aurelien.reeves@smartbear.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.