"You forgot to add 'mini-css-extract-plugin' plugin"

Webpack 5 fails as soon as I smp.wrap() my config, with the following error:

ERROR in ..../Error.scss
Module build failed (from ../../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 (.../node_modules/mini-css-extract-plugin/dist/loader.js:50:14)

The error stems from a missing symbol, which is defined when the plugin module loads, and assigned in a compilation hook:

// mini-css-extract-plugin/dist/loader.js@50
  if (!this[_index.pluginSymbol]) {
    callback(new 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"));
    return;
  }


// mini-css-extract-plugin/index.js@362
    compiler.hooks.compilation.tap(pluginName, compilation => {
      const normalModuleHook = typeof NormalModule.getCompilationHooks !== 'undefined' ? NormalModule.getCompilationHooks(compilation).loader : compilation.hooks.normalModuleLoader;
      normalModuleHook.tap(pluginName, loaderContext => {
        // eslint-disable-next-line no-param-reassign
        loaderContext[pluginSymbol] = true;
      });
    });

However, with smp.wrap() the inner callback above is never run and the symbol is never added to the loader’s context.

Cheers. 😃

Versions

webpack: 5.21.0
mini-css-extract-plugin: 1.3.9
speed-measure-webpack-plugin: 1.5.0

Config

plugins: [
  ...
  MiniCssExtractPlugin {
    _sortedModulesCache: WeakMap { <items unknown> },
    options: {
      filename: [Function: filename],
      ignoreOrder: false,
      chunkFilename: 'chunk-[name].[contenthash].css'
    },
    runtimeOptions: {
      insert: undefined,
      linkType: 'text/css',
      attributes: undefined
    }
  },
  ...
  SpeedMeasurePlugin {
    options: {},
    timeEventData: {},
    smpPluginAdded: true,
    wrap: [Function: bound wrap],
    getOutput: [Function: bound getOutput],
    addTimeEvent: [Function: bound addTimeEvent],
    apply: [Function: bound apply],
    provideLoaderTiming: [Function: bound provideLoaderTiming],
    generateLoadersBuildComparison: [Function: bound generateLoadersBuildComparison]
  }
],
module: {
  rules: [
    ...
    {
      test: /\.css$/,
      include: /node_modules/,
      use: [
        '.../node_modules/mini-css-extract-plugin/dist/loader.js',
        '.../node_modules/css-loader/dist/cjs.js'
      ]
    },
    {
      test: /\.(sass|scss|css)$/,
      exclude: /node_modules/,
      use: [
        '.../node_modules/mini-css-extract-plugin/dist/loader.js',
        {
          loader: '.../node_modules/css-loader/dist/cjs.js',
          options: { importLoaders: 1 }
        },
        {
          loader: '.../node_modules/sass-loader/dist/cjs.js',
          options: {
            implementation: {
              run_: [Function],
              render: [Function],
              renderSync: [Function],
              info: 'dart-sass\t1.23.0\t(Sass Compiler)\t[Dart]\n' +
                'dart2js\t2.5.1\t(Dart Compiler)\t[Dart]',
              types: [Object]
            },
            sassOptions: { fiber: false }
          }
        }
      ]
    }
  ]
}

Issue Analytics

State:
Created 2 years ago
Reactions:125
Comments:68

Top GitHub Comments

67reactions

saharikocommented, Nov 23, 2021

As a hacky workaround, you can append MiniCssExtractPlugin after wrapping with speed-measure-webpack-plugin:

// webpack.config.js

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const config = {
  // ...
  plugins: [
    // Whatever other plugins you may have
  ]
};

const configWithTimeMeasures = new SpeedMeasurePlugin().wrap(config);
configWithTimeMeasures.plugins.push(new MiniCssExtractPlugin({}));

module.exports = configWithTimeMeasures;

67reactions

Bessonovcommented, Sep 17, 2021

@wuliqiangqiang @Liaozzzzzz @KingOfCramers @PenguinShade @MaksZhukov @RichardZhang12 shame on you guys. You show your disrespect to the open source space in a very bad way. I don’t want any shameless message from you just because I’m interested in meaningful messages on this topic. What do you expect with “+1”? Please, stop doing crap. Instead you can just vote on the first comment or better provide a pull request to fix this issue.