"TypeError: MiniCssExtractPlugin is not a constructor" in fresh wp-scripts installation

[ivanjeremic]

Description

I get this on a fresh install what can be the issue?

~$ npx @wordpress/create-block gutenpride

Creating a new WordPress block in "gutenpride" folder.

Creating a "block.json" file.

Creating a "package.json" file.

Installing npm dependencies. It might take a couple of minutes...

Installing `@wordpress/scripts` package. It might take a couple of minutes...

Formatting JavaScript files.

Compiling block.
/home/ivje/.npm/_npx/0890e296436e9575/node_modules/execa/lib/error.js:59
                error = new Error(message);
                        ^

Error: Command failed with exit code 2: npm run build
[webpack-cli] Failed to load '/home/ivje/gutenpride/node_modules/@wordpress/scripts/config/webpack.config.js' config
[webpack-cli] TypeError: MiniCSSExtractPlugin is not a constructor
    at Object.<anonymous> (/home/ivje/gutenpride/node_modules/@wordpress/scripts/config/webpack.config.js:240:3)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at WebpackCLI.tryRequireThenImport (/home/ivje/gutenpride/node_modules/webpack-cli/lib/webpack-cli.js:244:16)
    at loadConfigByPath (/home/ivje/gutenpride/node_modules/webpack-cli/lib/webpack-cli.js:1710:30)
    at /home/ivje/gutenpride/node_modules/webpack-cli/lib/webpack-cli.js:1765:11

> gutenpride@0.1.0 build
> wp-scripts build

    at makeError (/home/ivje/.npm/_npx/0890e296436e9575/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/home/ivje/.npm/_npx/0890e296436e9575/node_modules/execa/index.js:114:26)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async module.exports (/home/ivje/.npm/_npx/0890e296436e9575/node_modules/@wordpress/create-block/lib/init-wp-scripts.js:31:2)
    at async module.exports (/home/ivje/.npm/_npx/0890e296436e9575/node_modules/@wordpress/create-block/lib/scaffold.js:103:3)
    at async Command.<anonymous> (/home/ivje/.npm/_npx/0890e296436e9575/node_modules/@wordpress/create-block/lib/index.js:91:6) {
  shortMessage: 'Command failed with exit code 2: npm run build',
  command: 'npm run build',
  exitCode: 2,
  signal: undefined,
  signalDescription: undefined,
  stdout: '\n> gutenpride@0.1.0 build\n> wp-scripts build\n',
  stderr: "[webpack-cli] Failed to load '/home/ivje/gutenpride/node_modules/@wordpress/scripts/config/webpack.config.js' config\n" +
    '[webpack-cli] TypeError: MiniCSSExtractPlugin is not a constructor\n' +
    '    at Object.<anonymous> (/home/ivje/gutenpride/node_modules/@wordpress/scripts/config/webpack.config.js:240:3)\n' +
    '    at Module._compile (node:internal/modules/cjs/loader:1101:14)\n' +
    '    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)\n' +
    '    at Module.load (node:internal/modules/cjs/loader:981:32)\n' +
    '    at Function.Module._load (node:internal/modules/cjs/loader:822:12)\n' +
    '    at Module.require (node:internal/modules/cjs/loader:1005:19)\n' +
    '    at require (node:internal/modules/cjs/helpers:102:18)\n' +
    '    at WebpackCLI.tryRequireThenImport (/home/ivje/gutenpride/node_modules/webpack-cli/lib/webpack-cli.js:244:16)\n' +
    '    at loadConfigByPath (/home/ivje/gutenpride/node_modules/webpack-cli/lib/webpack-cli.js:1710:30)\n' +
    '    at /home/ivje/gutenpride/node_modules/webpack-cli/lib/webpack-cli.js:1765:11',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}

Step-by-step reproduction instructions

'npx @wordpress/create-block gutenpride'

Screenshots, screen recording, code snippet

No response

Environment info

node version v16.13.1
npm version 8.1.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jonshipman]

Another way to reproduce:

mkdir test && cd test
yarn init -y
yarn add @wordpress/scripts
echo 'alert("hello world");' > test.js
yarn wp-scripts build test.js

Been fighting with this one all afternoon. Tried rolling back to 19.2.1, no dice. Me thinks something updated today that broke a webpack plugin.

Interesting note: this error only shows up on yarn classic. yarn berry fails silently. Ruined my pipelines today.

[ivanjeremic]

Another way to reproduce:

mkdir test && cd test
yarn init -y
yarn add @wordpress/scripts
echo 'alert("hello world");' > test.js
yarn wp-scripts build test.js

Been fighting with this one all afternoon. Tried rolling back to 19.2.1, no dice. Me thinks something updated today that broke a webpack plugin.

Interesting note: this error only shows up on yarn classic. yarn berry fails silently. Ruined my pipelines today.

So you have still no solution other then using oder version of create-block?

[ivanjeremic]

When I run build in the project.

> wp-scripts build

[webpack-cli] Failed to load '/home/ivje/callout-box/node_modules/@wordpress/scripts/config/webpack.config.js' config
[webpack-cli] TypeError: MiniCSSExtractPlugin is not a constructor
    at Object.<anonymous> (/home/ivje/callout-box/node_modules/@wordpress/scripts/config/webpack.config.js:240:3)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at WebpackCLI.tryRequireThenImport (/home/ivje/callout-box/node_modules/webpack-cli/lib/webpack-cli.js:244:16)
    at loadConfigByPath (/home/ivje/callout-box/node_modules/webpack-cli/lib/webpack-cli.js:1710:30)
    at /home/ivje/callout-box/node_modules/webpack-cli/lib/webpack-cli.js:1765:11

[jonshipman]

Downgrade @wordpress/scripts for now. A project that uses v12 built fine for me just now

[jonshipman]

mini-css-extract-plugin was update 5 hours ago.
https://github.com/webpack-contrib/mini-css-extract-plugin

@see webpack-contrib/mini-css-extract-plugin#896

Temporary work around:

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

Add that to your package.json.

[leanderseige]

@jonshipman I start with a fresh npx @wordpress/create-block todo-list, after the crash with TypeError: MiniCSSExtractPlugin is not a constructor I add your recommended "resolutions" block to package.json. How to continue from here? npm run build fails because of missing webpack.config.js.

[ivanjeremic]

@jonshipman I start with a fresh npx @wordpress/create-block todo-list, after the crash with TypeError: MiniCSSExtractPlugin is not a constructor I add your recommended "resolutions" block to package.json. How to continue from here? npm run build fails because of missing webpack.config.js.

I had the same problem, downgrade @wordpress/scripts to v12 then add the Temporary work around to your package.json then use an external terminal not the built in one to build the project, for whatever reason the integrated vscode terminal is not working.

[leanderseige]

@ivanjeremic why did you choose v12? It is quite old.

[ivanjeremic]

Thats what worked for me.

[ivanjeremic]

@ivanjeremic why did you choose v12? It is quite old.

Just found out 17 works too but nothing above 17.

[gziolo]

This is an issue with the npm package not following semantic versioning, which might happen accidentally. I commented under the issue they already had filed: webpack-contrib/mini-css-extract-plugin#896 (comment). Let’s see if they publish a quick follow-up bugfix release, or we need to land the patch opened by @fabiankaegy: #38004.

[webfolkcreative]

@gziolo Has a decision been made regarding this?

[gziolo]

I have just merged #38004. I will cherry-pick the commit and run npm publishing.

[gziolo]

I have just published a bug fix for @wordpress/scripts caused by the new version of mini-css-extract-plugin reported over the weekend, thank you everyone for finding a quick workaround:

Successfully published:
 - @wordpress/e2e-tests@2.5.15
 - @wordpress/scripts@19.2.3

[gziolo]

It's now also fixed upstream as noted in webpack-contrib/mini-css-extract-plugin#896 (comment).

There is also a note left important for us:

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

We will need a follow-up in trunk to clean the temporary workaround and maybe update the dependency to ^2.5.1. Is anyone willing to take care of it? I might not have time for it today.

[fabiankaegy]

I can add a follow up PR :)

[leanderseige]

But our workaround still works! npx @wordpress/create-block uses version 2.5.1 now and everything is ok because of the fallback clause!