Can't npm run build on new projects due to mini-css-extract-plugin

[korggy]

Version

5.0.4

Environment info

  System:
    OS: Windows 10 10.0.22000
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900K
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22000.120.0), Chromium (102.0.1245.33)
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. Start vue ui.
2. Create a new project. Accept all defaults, manually select all features off, Vue 2.x.
3. Switch to Tasks / build page.
4. Click Run task.

What is expected?

New projects should build successfully out of the box.

What is actually happening?

Run task returns an error: Syntax Error: Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. { plugins: [new MiniCssExtractPlugin()] }), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started

---

Workaround 1: Turn off Extract CSS in configuration. This corrects the build problem but does not create standalone CSS files.

1. Switch to Configuration page.
2. Switch Extract CSS to off
3. Save changes

Workaround 2: Manually add mini-css-extract-plugin and configure the project for it.

1. Add mini-css-extract-plugin as a development dependency.
2. Add a vue.config.js file with the following content:

// vue.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  configureWebpack: {
    plugins: [new MiniCssExtractPlugin()],
  }
};

[huang2002]

I met exactly the same issue. But my build task succeeded after I manually installed mini-css-extract-plugin WITHOUT further config.

[richex-cn]

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/888