"You forgot to add 'mini-css-extract-plugin' plugin" #167
Description
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 }
}
}
]
}
]
}