svg-sprite-loader: Doesn't work on the server side

Hi everyone! I’ve run into a similar issue, however I didn’t want to webpack my entire backend so I came up with a kinda hacky solution.

I was already using ignore-styles as I import relevant stylesheets into my react components, so in order to generate the correct server side markup I just needed to add the following to my bootstrapping file:

const path = require('path');
const crypto = require('crypto');

require('ignore-styles').default(['.scss', '.css', '.svg'], (module, filename) => {
  const base = path.basename(filename);
  if (base.indexOf('.svg') > 0) {
    module.exports = '#' + crypto.createHash('md5').update(filename).digest("hex");
  }
});

Note this works with the following webpack config:

{
  ...
  module: {
    loaders: [
      {
        test: /\.svg$/,
        loader: 'svg-sprite?' + JSON.stringify({
          name: '[pathhash]',
          prefixize: true
        })
      }
    ]
  },
  ...
}

I hope this helps somebody! 😃

Shouldn’t something like SSR live in the default sprite impl? The very least it should do on a node environment it just return the symbol id (without using document) instead of failing.

I believe for SSR, we need a node require hook that will generate the correct ID for a given path, then it should all work fine since the sprite will be loaded client-side. I would give it a go, but I’m first trying to get a sprite generated at all.

Thing is I’m using a server side rendered Application, which is why this loader is failing when going through the app initialization. In the meantime, I managed to make it work by only requiring the plugin if typeof window !== 'undefined', it’s a temporal fix, but works, so will be looking forward to the alpha version next week 😃

Thanks for taking the time to look out my problem here 👍