webpack-svgstore-plugin icon indicating copy to clipboard operation
webpack-svgstore-plugin copied to clipboard

Wrong __svg__ filename returns a "Uncaught Error: Invalid SVG Response"

Open m10a-dev opened this issue 7 years ago • 2 comments

I took a couple of hours to debug this issues and, thanks to @webmarkelov "change the ajax path request?", I found a workaround that looks like an hack.

// webpack.config.js

new SvgStore({
    svgoOptions: {
      plugins: [
        { removeDoctype: true },
        { removeTitle: true },
        { removeMetadata: true },
        { removeComments: true },
        { removeDesc: true },
        { removeDimensions: true },
        { removeUselessStrokeAndFill: true },
        { removeUnknownsAndDefaults: true },
        { cleanupIDs: true },
        { cleanupAttrs: false },
        { moveGroupAttrsToElems: true }
      ]
    },
    prefix: ''
  })

BUG

// main.js

let __svg__ = {
  path: '../../icons/partials/**/*.svg',
  name: '../icons/icons.svg',
};

require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);

I was getting two errors: GET http://domain.xyz/assets/icons/icons.svg 404 (Not Found) svgxhr.js:47 Uncaught Error: Invalid SVG Response at XMLHttpRequest._ajax.onload (svgxhr.js:38) However, the sprite is generated on the correct path.

FIX

// main.js

let __svg__ = {
  path: '../../icons/partials/**/*.svg',
  name: '../icons/icons.svg',
};
__svg__ = {filename: 'theme_path/assets/icons/icons.svg'};

By overwriting the __svg__ filename, the errors are gone.

Does anyone knows a way to fix it? Everything was working fine until the last update.

m10a-dev avatar Dec 14 '17 11:12 m10a-dev

Same problem :( Did you find something ?

firestar300 avatar Apr 04 '18 12:04 firestar300

I guess you can do something like this:

require('webpack-svgstore-plugin/src/helpers/svgxhr')({
  filename: '/theme_path/assets/' + __svg__.filename
});

Honestly, we should make it more convenient.

lgordey avatar Apr 22 '18 18:04 lgordey