San Francisco
· SVG Translate · programming · Webpack · CSS · Symfony · Encore ·
I'm getting this error when compiling SVG Translate's assets with Webpack:
error in ./assets/app.less
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options
options should NOT have additional properties
It's come about due to trying to upgrade to css-loader version 2.1.
If I comment out all the assets in webpack.config.js, the error goes away, and comes back when I only include assets/app.less (I didn't try to narrow it down to any other files; one example should be enough).
It sounds like the options for css-loader have changed. If I dump the config for that module, I get this:
console.log(module.exports.module.rules[1].use);
[
'./svgtranslate/node_modules/mini-css-extract-plugin/dist/loader.js',
{
loader: 'css-loader',
options: { minimize: true, sourceMap: false, importLoaders: 0 }
}
]
It seems that minimize and sourceMap are not valid options; the first was removed in version 1.0.0 (which I guess SVG Translate wasn't using), and I'm not sure about the second. I'm not sure where they're coming from, I guess some Encore config somewhere; certainly it's not in SVG Translate's config.
What if I just delete them?
delete module.exports.module.rules[1].use[1].options.minimize;
delete module.exports.module.rules[1].use[1].options.sourceMap;
Nope, no good; same error. Oh, of course: because that's being done after the loader is being used. What if the css-loader is configured manually, earlier?
.configureCssLoader(function ( options ) {
delete options.minimize;
delete options.sourceMap;
return options;
} )
Yup! That works. Does it work when all the other asset files are uncommented? No:
error in ./node_modules/oojs-ui/dist/oojs-ui-wikimediaui.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Maximum call stack size exceeded
You may need an appropriate loader to handle this file type.
RangeError: Maximum call stack size exceeded
If we switch to an already minified version of node_modules/oojs-ui/dist/oojs-ui-wikimediaui.css? Yes!!
So maybe things are okay now? This feels like a reasonably ugly fix, but if it works then I'm happy for now.
The result is here: https://github.com/wikimedia/svgtranslate/pull/45