mrsum / webpack-svgstore-plugin

Simple svg-sprite creating with webpack
https://www.npmjs.com/package/webpack-svgstore-plugin
200 stars 90 forks source link

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

Open CarpenterBug opened 6 years ago

CarpenterBug commented 6 years ago

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.

firestar300 commented 6 years ago

Same problem :( Did you find something ?

lgordey commented 6 years ago

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.