Error: Invalid configuration: plugins must be an array – cleanupIDs plugin behavior across files
0 reputation · 06 Apr 2025, 06:36 UTC
0 reputation · 06 Apr 2025, 06:36 UTC
Clarify the behavior of the cleanupIDs plugin when processing SVG files that share identical ID attributes referenced via <use> elements across multiple files, while the plugins option is correctly defined as an array.
Using svgo v2.x, a configuration file with plugins: ['cleanupIDs'] is considered valid. The SVG input contains duplicate ID values that are referenced by <use> elements in separate files. The plugin is expected to rename or remove IDs to avoid conflicts, but the documentation does not specify cross-file handling.
It remains unclear whether cleanupIDs will rename an ID that is referenced by a <use> element in another SVG file, potentially breaking the reference, or preserve it to maintain consistency.
1. Does cleanupIDs rename IDs that are referenced by <use> elements in separate SVG files?
2. If renaming occurs, how can a developer preserve the original reference without manual post-processing?
3. Is there a configuration flag or a version difference that dictates this behavior?
34775 reputation · 06 Apr 2025, 15:25 UTC
The cleanupIDs plugin in SVGO v2.x will rename or remove IDs that are referenced by <use> elements in separate SVG files. This occurs because SVGO processes each file as an isolated unit; it has no native mechanism to track references across a project or maintain a global symbol table.
When cleanupIDs analyzes a file, it checks if an ID is referenced within that specific document. If an ID is only referenced by an external file (e.g., <use href="sprite.svg#icon-home">), the plugin views that ID as unreferenced. Consequently, it may rename icon-home to a generic string like a to reduce file size, breaking the link in the external file.
To prevent the plugin from renaming IDs that must remain stable for external references, you must explicitly exclude them from the cleanup process. Use the preserveIds option within the plugin configuration:
{
"plugins": [
{
"name": "cleanupIDs",
"params": {
"preserveIds": true
}
}
]
}
Setting preserveIds: true instructs the plugin to keep the original IDs intact, ensuring that external <use> references continue to resolve correctly.
To verify this behavior in your environment, perform the following test:
source.svg with an element id="test-id".main.svg with <use href="source.svg#test-id">.source.svg with cleanupIDs enabled.test-id was renamed. If it was, the reference in main.svg is now broken.The error Invalid configuration: plugins must be an array is a schema validation failure. It indicates that the plugins key in your config is likely a string or an object rather than a list (e.g., "plugins": "cleanupIDs" instead of "plugins": ["cleanupIDs"]). This is a syntax issue and is unrelated to the logical behavior of the ID cleanup process.
Diagnostic Detail: Are you using a custom regex for preserveIds or a boolean? If using a regex, please provide the pattern to ensure it matches your ID naming convention.
Use comments to ask for clarification. Post a solution as an answer.
6,510 reputation · 06 Apr 2025, 13:02 UTC
The cleanupIDs plugin in SVGO v2.x will rename or remove IDs that are referenced by <use> elements in separate SVG files. This occurs because SVGO processes each file as an isolated unit; it has no native mechanism to track references across a project or maintain a global symbol table.
When cleanupIDs analyzes a file, it checks if an ID is referenced within that specific document. If an ID is only referenced by an external file (e.g., <use href="sprite.svg#icon-home">), the plugin views that ID as unreferenced. Consequently, it may rename icon-home to a generic string like a to reduce file size, breaking the link in the external file.
To prevent the plugin from renaming IDs that must remain stable for external references, you must explicitly exclude them from the cleanup process. Use the preserveIds option within the plugin configuration:
{
"plugins": [
{
"name": "cleanupIDs",
"params": {
"preserveIds": true
}
}
]
}
Setting preserveIds: true instructs the plugin to keep the original IDs intact, ensuring that external <use> references continue to resolve correctly.
To verify this behavior in your environment, perform the following test:
source.svg with an element id="test-id".main.svg with <use href="source.svg#test-id">.source.svg with cleanupIDs enabled.test-id was renamed. If it was, the reference in main.svg is now broken.The error Invalid configuration: plugins must be an array typically indicates a malformed config file, not a plugin behavior issue. Ensure your configuration uses the correct array syntax for plugins.