Module build failed when node_modules was installed using pnpm

[JasonCubic]

Bug report

Actual Behavior

when installing using pnpm this plugin produces an error when I do a webpack build.

I tried using shamefully-hoist=true but that did not resolve the issue.

I was planning to use the pnpm monorepo pattern for a project when I ran into this bug. This is kind of a showstopper though. I was surprised when I realized that if I did a node modules install using npm or yarn the error went away.

ERROR in ./src/App.vue?vue&type=style&index=0&id=36fe0b06&lang=css (./node_modules/.pnpm/mini-css-extract-plugin@2.4.5_webpack@5.65.0/node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/.pnpm/css-loader@6.5.1_webpack@5.65.0/node_modules/css-loader/dist/cjs.js??clonedRuleSet-6.use[1]!./node_modules/.pnpm/vue-loader@17.0.0_webpack@5.65.0/node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.4.5+webpack@5.65.0/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/.pnpm/vue-loader@17.0.0_webpack@5.65.0/node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/App.vue?vue&type=style&index=0&id=36fe0b06&lang=css)
Module build failed (from ./node_modules/.pnpm/mini-css-extract-plugin@2.4.5_webpack@5.65.0/node_modules/mini-css-extract-plugin/dist/loader.js):
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
    at Object.pitch (f:\node_sandbox\vue3-webpack-test\node_modules\.pnpm\mini-css-extract-plugin@2.4.5_webpack@5.65.0\node_modules\mini-css-extract-plugin\dist\loader.js:43:14)
 @ ./src/App.vue?vue&type=style&index=0&id=36fe0b06&lang=css 1:0-648 1:0-648
 @ ./src/App.vue 4:0-62
 @ ./src/main.js 2:0-28 3:10-13

Expected Behavior

The same as yarn and npm. Do a build with no errors.

How Do We Reproduce?

Here is the repo I noticed the bug on: https://github.com/JasonCubic/vue3-webpack5-template

I'm using pnpm version 6.24.4

clone the repo then do a pnpm install then a pnpm run build.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
    Memory: 6.13 GB / 19.94 GB
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.62)
    Internet Explorer: 11.0.19041.1202
  Packages:
    babel-loader: ^8.2.3 => 8.2.3
    clean-webpack-plugin: ^4.0.0 => 4.0.0
    copy-webpack-plugin: ^10.2.0 => 10.2.0
    css-loader: ^6.5.1 => 6.5.1
    css-minimizer-webpack-plugin: ^3.3.1 => 3.3.1
    html-webpack-plugin: ^5.5.0 => 5.5.0
    postcss-loader: ^6.2.1 => 6.2.1
    vue-loader: ^17.0.0 => 17.0.0
    webpack: ^5.65.0 => 5.65.0
    webpack-cli: ^4.9.1 => 4.9.1
    webpack-dev-server: ^4.7.2 => 4.7.2

[alexander-akait]

Sorry, I can't reproduce, what is the version of pnpm? I tried 6.24.4 locally and all works fine

[JasonCubic]

ok I verified it's only on my end.

It's a weird issue. I rebooted, cleaned out the pnpm store, uninstalled and reinstalled pnpm, uninstalled and reinstalled node even. I still get that error on my desktop. It works fine on my work laptop though. I don't know why it's recreatable, only for this one package, only for pnpm, and only on one of my systems. ¯_(ツ)_/¯ Seems like I have a mystery on my end.

Thank you for helping me @alexander-akait
I appreciate it.

[ldwqh0]

I have the same problem.

if i install with npm . it is run success.
but if i install with pnpm .

the "You forgot to add 'mini-css-extract-plugin' " error.

[ldwqh0]

I found that if I use the "npm run build" commond in a cmd window ,it is sucess.
but if I run a npm script in webstorm.

it will be have a mistak like this

build failed (from ./node_modules/.pnpm/mini-css-extract-plugin@2.6.0_webpack@5.70.0/node_modules/mini-css-extract-plugin/dist/loader.js):       
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

may be it is the webstom problem?

i modify the file 'node_modules/mini-css-extract-plugin/dist/index.js' at line 92

const pluginSymbol = Symbol(pluginName);
// print the pluginSymbol
console.log("create plugin symbol",MiniCssExtractPlugin.pluginSymbol)

and 'node_modules/mini-css-extract-plugin/dist/loader.js' at line 81

  const callback = this.async();
  // print the pluginSymbol
  console.log('the plugin symbol is',MiniCssExtractPlugin.pluginSymbol)
  const optionsFromPlugin =
  /** @type {TODO} */
  this[MiniCssExtractPlugin.pluginSymbol];

and test again.

I found that if I run "npm run build" with cmd
the ("create plugin symbol",MiniCssExtractPlugin.pluginSymbol) print one time.
but if I run the script with webstorm run configuration
the ("create plugin symbol",MiniCssExtractPlugin.pluginSymbol) print two times.
so ,the the pluginSymbol is not the same.

I found the problem ,but i do not know why it happend. it may be the webstorm bug.

[richex-cn]

I got the same issue.

VSCode: v1.67.2
PNPM: v7.2.1
git version 2.35.1.windows.2

In VSCode integrated terminal, work normally.
But in git bash or Windows CMD, I got the same issue.