Error in Plugin name should be specified
bechtold opened this issue ยท 16 comments
Documentation Is:
- Missing
- Needed
- Confusing
- Not Sure?
- Broken
Please Explain in Detail...
Hey,
I'm using Webpack 5 using the Asset Module for images as described in the Asset Management documentation.
Now I added the ImageMinimizerWebpackPlugin.
During compilation I get the error: "Error in Plugin name should be specfied".
When I turn
[
'svgo',
{
plugins: [
{
removeViewBox: false,
},
],
},
],
into
[
'svgo',
{
removeViewBox: false,
},
],
it works, but it does not seem like the option still does what it's supposed (when I set removeViewBox: true it does not remove the viewBox).
Not a problem in my case though, I don't want it to be removed.
Your Proposal for Changes
I'm not sure if the documentation is broken, or if the plugin does not work with the asset management. But I still wanted to leave a note here, that errors appear when following the documentation for the basic setup.
If anything is missing in this issue, let me know and I'll try to provide it.
Please create reproducible test repo
The problem appears when using imagemin-svgo 9.0.0
I think you need open an issue in svgo, we just imagemin runner with plugins
Sorry, I didn't find the time yet to create a reproducible repo, but I'm pretty sure the issue is not on svgo side.
And I actually found out more on the svgo documentation.
Instead of
[
'svgo',
{
plugins: [
{
removeViewBox: false,
},
],
},
],
we need
[
'svgo',
{
plugins: [
{
name: 'removeViewBox',
active: false
},
],
},
],
Then it works fine and as expected.
But there is another thing I want to point out. On the svgo docs it says: "The default list is fully overridden if the plugins field is specified.". So with the example in the readme of this project people risk completely losing svgo's default settings when, like me, just copy&pasting the example. A better approach would be to use:
const { extendDefaultPlugins } = require('svgo');
...
[
'svgo',
{
plugins: extendDefaultPlugins([
{
name: 'removeViewBox',
active: false
},
]),
},
],
This way it works fine for me.
If you still want I'll try to find some time to create a repo, but after studying the docs of svgo things should be clear, what do you think?
Should I create a PR to suggest changes to the readme?
Ok, I'll just create a demo and then create a PR. Will try to do it on the weekend :-)
Yep, feel free to update docs
I'm getting the same error:
@CavalcanteLeo How it should help?
@CavalcanteLeo did my suggested config work for you?
Didn't find time for the PR yet. But it would be good to know if my solution also solves your problem :-)
sure i will try later today, and then i tell u...
I'm not using image-minimizer-webpack-plugin directly, im using this instead: https://github.com/nuxt-community/imagemin-module , that uses image-minimizer-webpack-plugin
thanks
@bechtold Your config worked for me, thanks! ๐
I'm not sure it will help but my issue is similar. In my case it is not an error but a warning: WARNING in Plugin name should be specified. @bechtold solution (#190 (comment)) fixed the problem but I would like to share my configuration to help identify the problem.
In my case, the problem occurs when I add copy-webpack-plugin in addition to image-minimizer-webpack-plugin. Without the copy plugin, I have no warnings.
A part of my config in package.json:
"webpack": "^5.37.0","image-minimizer-webpack-plugin": "^2.2.0","imagemin-svgo": "^9.0.0","copy-webpack-plugin": "^8.1.1",- I also use
"webpack-cli": "^4.7.0"and"webpack-merge": "^5.7.3"but I don't think these packages have an impact.
webpack.config.js example: (I only left the affected parts)
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset/resource',
generator: {
filename: 'img/[name][ext]'
}
},
],
},
plugins: [
new ImageMinimizerPlugin({
minimizerOptions: {
plugins: [
// ...
[
'svgo',
{
plugins: [
{removeTitle: true},
{removeViewBox: false},
{removeXMLNS: false},
],
},
],
],
},
}),
new CopyPlugin({
patterns: [{from: paths.src.img, to: 'img'}],
}),
],The paths.src.img comes from a paths.js file:
const path = require('path');
const devFolder = path.resolve(__dirname, '../');
module.exports = {
src: {
img: path.resolve(devFolder, './img/'),
},
};So, I don't know where the solution should appear in the documentation. The current instructions are working in most cases and they should not be overwritten. Maybe in Examples? But, in this case, it would require more information about the problem to explain when to use this solution. I had warnings, the others had errors. So the problem must be different even if the solution is the same ...
extendDefaultPlugins is now deprecated. One needs to do this instead:
// ...
plugins: [
{
name: 'preset-default',
params: {
overrides: { removeViewBox: false },
},
},
],
// ...To anyone struggling with this (and if you'd kindly like to add this example to the README or any other useful place), here's what actually worked for me. It's a bit long, but hopefully it will help.
svgo.config.js
module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
cleanupAttrs: true,
removeDoctype: true,
removeXMLProcInst: true,
removeComments: true,
removeMetadata: true,
removeTitle: true,
removeDesc: true,
removeUselessDefs: true,
removeEditorsNSData: true,
removeEmptyAttrs: true,
removeHiddenElems: true,
removeEmptyText: true,
removeEmptyContainers: true,
removeViewBox: false,
cleanupEnableBackground: true,
convertStyleToAttrs: true,
convertColors: true,
convertPathData: true,
convertTransform: true,
removeUnknownsAndDefaults: true,
removeNonInheritableGroupAttrs: true,
removeUselessStrokeAndFill: true,
removeUnusedNS: true,
cleanupIDs: true,
cleanupNumericValues: {
floatPrecision: 1,
},
moveElemsAttrsToGroup: true,
moveGroupAttrsToElems: true,
collapseGroups: true,
removeRasterImages: false,
mergePaths: true,
convertShapeToPath: {
convertArcs: true,
},
sortAttrs: true,
removeDimensions: true,
},
},
},
{
name: 'removeAttrs',
params: {
attrs: '(width|height|style|color)',
},
},
],
}index.js
const path = require('path')
const { optimize, loadConfig } = require('svgo')
const svgoConfigFile = path.resolve(__dirname, '../svgo.config.js')
;(async () => {
const svgoConfig = await loadConfig(svgoConfigFile)
const { data } = optimize(
`<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="10"/>
<path d="M12 8v4M12 16h.01"/>
</svg>`,
svgoConfig
)
console.log(data)
})()Prints out:
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20zM12 8v4m0 4h.01"/>
</svg>Hey, thanks for the progress.
I am implementing "imagemin-svgo" for vue cli 5 that uses webpack 5 and I keep a list of errors.
Example:
You are trying to enable removeEmptyContainers which is not part of preset.
Try to put it before or after preset, for example
plugins: [ { name: 'preset-default', }, 'cleanupListOfValues' ]
Anyone has the same thing?
"image-minimizer-webpack-plugin": "^3.2.3",
"imagemin": "^8.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^10.0.0",
"imagemin-pngquant": "^9.0.2",
"imagemin-svgo": "^10.0.1",
"webpack" : "5.54.0"
Thanks for the help guys!