svg-spritemap-webpack-plugin since SVGO v2.4.0 release

[jimblue]

Description This plugin stopped working in project using latest SVGO release 2.4.0

Expected behavior This should work with latest SVGO update as SVGO is a peer dependency of many projects.

Actual behavior When running webpack :

"extendDefaultPlugins" utility is deprecated.
Use "preset-default" plugin with overrides instead.
For example:
{
  name: 'preset-default',
  params: {
    overrides: {
      // customize plugin options
      convertShapeToPath: {
        convertArcs: true
      },
      // disable plugins
      convertPathData: false
    }
  }
}

System information

System:
    OS: macOS 11.5.2
    CPU: (8) arm64 Apple M1
    Memory: 122.22 MB / 16.00 GB
    Shell: 3.3.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.6.1 - ~/.local/share/nvm/v16.6.1/bin/node
    npm: 7.20.6 - ~/.local/share/nvm/v16.6.1/bin/npm
  npmPackages:
    @babel/core: 7.15.0 => 7.15.0
    @babel/eslint-parser: 7.15.0 => 7.15.0
    @babel/eslint-plugin: 7.14.5 => 7.14.5
    @babel/plugin-proposal-class-properties: 7.14.5 => 7.14.5
    @babel/plugin-syntax-dynamic-import: 7.8.3 => 7.8.3
    @babel/plugin-transform-runtime: 7.15.0 => 7.15.0
    @babel/plugin-transform-spread: 7.14.6 => 7.14.6
    @babel/preset-env: 7.15.0 => 7.15.0
    @babel/register: 7.15.3 => 7.15.3
    @babel/runtime-corejs3: 7.15.3 => 7.15.3
    autosize: 5.0.1 => 5.0.1
    axios: 0.21.1 => 0.21.1
    babel-loader: 8.2.2 => 8.2.2
    body-scroll-lock: 4.0.0-beta.0 => 4.0.0-beta.0
    chalk: 4.1.2 => 4.1.2
    clean-webpack-plugin: 4.0.0-alpha.0 => 4.0.0-alpha.0
    core-js: 3.16.2 => 3.16.2
    css-loader: 6.2.0 => 6.2.0
    css-minimizer-webpack-plugin: 3.0.2 => 3.0.2
    current-device: 0.10.2 => 0.10.2
    deepmerge: 4.2.2 => 4.2.2
    dotenv: 10.0.0 => 10.0.0
    dotenv-expand: 5.1.0 => 5.1.0
    dotenv-parse-variables: 2.0.0 => 2.0.0
    email-validator: 2.0.4 => 2.0.4
    eslint: 7.32.0 => 7.32.0
    eslint-config-prettier: 8.3.0 => 8.3.0
    eslint-config-standard: 16.0.3 => 16.0.3
    eslint-import-resolver-custom-alias: 1.2.0 => 1.2.0
    eslint-plugin-compat: 3.12.0 => 3.12.0
    eslint-plugin-import: 2.24.0 => 2.24.0
    eslint-plugin-node: 11.1.0 => 11.1.0
    eslint-plugin-prettier: 3.4.0 => 3.4.0
    eslint-plugin-promise: 5.1.0 => 5.1.0
    eslint-webpack-plugin: 3.0.1 => 3.0.1
    fibers: 5.0.0 => 5.0.0
    fs-extra: 10.0.0 => 10.0.0
    glob-all: 3.2.1 => 3.2.1
    gulp: 4.0.2 => 4.0.2
    gulp-svg-sprite: 1.5.0 => 1.5.0
    image-minimizer-webpack-plugin: 2.2.0 => 2.2.0
    image-webpack-loader: 7.0.1 => 7.0.1
    imagemin-gifsicle: 7.0.0 => 7.0.0
    imagemin-jpegtran: 7.0.0 => 7.0.0
    imagemin-optipng: 8.0.0 => 8.0.0
    imagemin-svgo: 9.0.0 => 9.0.0
    justified-layout: 4.1.0 => 4.1.0
    mapbox-gl: 2.4.1 => 2.4.1
    mini-css-extract-plugin: 2.2.0 => 2.2.0
    notiflix: 3.0.1 => 3.0.1
    npm-check-updates: 11.8.3 => 11.8.3
    ora: 5.4.1 => 5.4.1
    photoswipe: 4.1.3 => 4.1.3
    polyfill-library: 3.107.1 => 3.107.1
    postcss: 8.3.6 => 8.3.6
    postcss-loader: 6.1.1 => 6.1.1
    postcss-normalize: 10.0.0 => 10.0.0
    postcss-normalize-charset: 5.0.1 => 5.0.1
    postcss-normalize-url: 5.0.2 => 5.0.2
    postcss-preset-env: 6.7.0 => 6.7.0
    postcss-sort-media-queries: 3.11.12 => 3.11.12
    postcss-viewport-height-correction: 1.1.1 => 1.1.1
    prettier: 2.3.2 => 2.3.2
    purgecss-webpack-plugin: 4.0.3 => 4.0.3
    quicklink: 2.2.0 => 2.2.0
    raf-schd: 4.0.3 => 4.0.3
    resolve-url-loader: 4.0.0 => 4.0.0
    sass: 1.38.0 => 1.38.0
    sass-loader: 12.1.0 => 12.1.0
    scroll-js: 3.4.2 => 3.4.2
    stylelint: 13.13.1 => 13.13.1
    stylelint-config-prettier: 8.0.2 => 8.0.2
    stylelint-config-recess-order: 2.5.0 => 2.5.0
    stylelint-config-recommended-scss: 4.3.0 => 4.3.0
    stylelint-config-standard: 22.0.0 => 22.0.0
    stylelint-no-unsupported-browser-features: 5.0.1 => 5.0.1
    stylelint-prettier: 1.2.0 => 1.2.0
    stylelint-scss: 3.20.1 => 3.20.1
    stylelint-webpack-plugin: 3.0.1 => 3.0.1
    svg-spritemap-webpack-plugin: ^4.2.0 => 4.2.0
    svgo: 2.4.0 => 2.4.0
    terser-webpack-plugin: 5.1.4 => 5.1.4
    webpack: 5.50.0 => 5.50.0
    webpack-assets-manifest: 5.0.6 => 5.0.6
    webpack-bundle-analyzer: 4.4.2 => 4.4.2
    webpack-dev-server: 4.0.0-beta.3 => 4.0.0-beta.3
    webpack-livereload-plugin: 3.0.2 => 3.0.2
    webpack-remove-empty-scripts: 0.7.1 => 0.7.1
    zooming: 2.1.1 => 2.1.1

[cascornelissen]

Thanks for the heads-up. This is an interesting change, to say the least... They overhauled the entire defaults setup and deprecated the old one while the new one is not compatible at all so now this plugin has to support both systems.

The changes in 500280a should handle this, all tests are passing with both SVGO 2.3.0 and 2.4.0. Are you able to verify this on your end as well?

[jimblue]

Hey @cascornelissen, thank you for the commit, I'll try to test that tomorrow.

[cascornelissen]

@jimblue (or anyone else running into this problem), had any time to verify it already?

[Jackky90]

Have the same issue

[meelkor]

Was getting the same warning as OP so I tested it with 500280acbf4517319e57e951a44db524060dc105 and while the issue is fixed - no warnings are logged - the output spritemap changed unfortunately. I assume the issue is that we use the removeAttrs plugin, which isn't part of the default preset and the override plugin only works for plugins that are included in the preset. So maybe it should be developer's responsibility to use the default-preset plugin if they want to use the default plugins and they'll be able to completely override plugins otherwise. But I understand that injecting the "pre" and "post" plugins will become little bit trickier.

[cascornelissen]

@meelkor, thanks for testing 500280a out and reporting your findings.

Can you share your configuration so that I can check what's happening? An update to SVGO can always change the output of the spritemap and it's not entirely clear to me whether the problem you're describing is about having a different output or the removeAttrs plugin not doing what you're expecting it to do.

As you've probably figured out we can't exclude the default-preset plugin from this project as there's overwrites that need to be made in certain scenarios.

---

If anyone has the same issue, please try out the current master directly from GitHub and let me know if that resolves the issue. If you're seeing new issues feel free to keep them in this thread for now.

npm install cascornelissen/svg-spritemap-webpack-plugin#master

[zavod008]

hello below is the config, the sprite is working fine but the "preset-default" warning remains.

new SVGspritemapPlugin(`${resourcesDir}/img/**/*.svg`, {
      output: {
        filename: 'img/icons.svg',
        chunk: { keep: true },
        svgo: {
          plugins: [
            {
              name: 'removeAttrs',
              params: {
                attrs: '(fill)'
              }
            }
          ]
        }
      },
      sprite: {
        prefix: 'icon-'
      }
    })

[cascornelissen]

@zavod008 are you talking about the "extendDefaultPlugins" utility is deprecated. warning as listed in the original post? Are you on the master build or did you install the plugin from NPM? Please read the last part of https://github.com/cascornelissen/svg-spritemap-webpack-plugin/issues/175#issuecomment-904906685.

[zavod008]

@cascornelissen 1) yes "extendDefaultPlugins" utility is deprecated. 2) from npm. ok i try install master version

[sectsect]

@cascornelissen The master build can solve this issue for me. https://github.com/cascornelissen/svg-spritemap-webpack-plugin/issues/175#issuecomment-904906685

[cascornelissen]

Thanks for reporting back @sectsect, this change was released with version 4.3.0 🚀 If there's any issues popping up feel free to create a new ticket.