speed-measure-webpack-plugin
speed-measure-webpack-plugin copied to clipboard
stephencookdev
"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 }
}
}
]
}
]
}
Still happening with
"webpack": "5.38.1",
"mini-css-extract-plugin": "1.6.0",
I have the feeling this is an issue with the 'mini-css-extract-plugin' as this happens even without the 'speed-measure-webpack-plugin' installed.
I just downgraded mini-css-extract-plugin version to 1.3.6 https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v1.3.7 1.3.7 version cause this error.
Not work with SpeedMeasurePlugin. I was deleted SpeedMeasurePlugin from my config and mini-css-extract-plugin work's fine
"dependencies": {
"format-money-js": "^1.4.3",
"selectivity": "^3.1.0",
"spectre.css": "^0.5.9",
"zepto-webpack": "^1.2.1"
},
"devDependencies": {
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"circular-dependency-plugin": "^5.2.2",
"css-loader": "^5.2.6",
"expose-loader": "^3.0.0",
"imports-loader": "^3.0.0",
"inspectpack": "^4.7.1",
"mini-css-extract-plugin": "^1.6.1",
"node-sass": "^6.0.0",
"purecss-sass": "^2.0.5",
"sass-loader": "^11.1.1",
"speed-measure-webpack-plugin": "^1.5.0",
"style-loader": "^2.0.0",
"unused-files-webpack-plugin": "^3.4.0",
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0"
}```
Remove smp.wrap function run ok
same issue, apart from lowering the version of mini-css-extract-plugin to 1.3.6, or remove smp.wrap(),
is there no other better solution that make smp and mini-css-extract-plugin use the latest version at the same time?
I spent a little bit of time trying to debug this but haven't come up with anything conclusive. Here's some notes:
This plugin appears to produce a relevant deprecation warning:
(node:63005) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
mini-css-extract-plugin throws the "You forgot to add..." error if it can't find Symbol(mini-css-extract-plugin) symbol in the loader context
https://github.com/webpack-contrib/mini-css-extract-plugin/blob/684ad366d2fc34e58746e687bb6d33a797c71be2/src/loader.js#L42-L51
This is set on the NormalModule compilation hook:
https://github.com/webpack-contrib/mini-css-extract-plugin/blob/684ad366d2fc34e58746e687bb6d33a797c71be2/src/index.js#L445-L457
Disabling wrapping for Compiler "fixes" the issue
https://github.com/stephencookdev/speed-measure-webpack-plugin/blob/ca66781752e4d11a0730a444b7c21947a569cd1b/WrappedPlugin/index.js#L162
const construcNamesToWrap = [
// "Compiler",
"Compilation",
"MainTemplate",
"Parser",
"NormalModuleFactory",
"ContextModuleFactory",
];
This hook never gets called when SMP is wrapping Compiler, so loaderContext[pluginSymbol] is never being set
https://github.com/webpack-contrib/mini-css-extract-plugin/blob/684ad366d2fc34e58746e687bb6d33a797c71be2/src/index.js#L453
That's about as far as I got, hopefully this is useful. I'm pretty unfamiliar with webpack internals so most of this is new to me so maybe somebody more familiar will be able to fix it from here.
