SVG loader returns a string instead of a symbol object when loading from storybook

[silicakes]

versions:

    "svg-sprite-loader": "^3.7.3",
    "svgo": "^1.0.5",
    "svgo-loader": "^2.1.0",
    "ts-loader": "^4.1.0",
    "typescript": "^2.8.1",
    "webpack": "^4.3.0",
    "webpack-cli": "^2.0.13"

webpack configuration

{
    test: /\.svg$/,
    use: [
      {
        loader: 'svg-sprite-loader',
        options: {
          // extract: true,
          spriteFilename: "icon.svg"
        }
      }, {
        loader: 'svgo-loader',
        options: {
          plugins: [
            { removeTitle: true },
            { convertColors: { shorthex: false } },
            { convertPathData: false }
          ]
        }
      }]
  }

When importing a sprite:

import * as education from "../src/assets/svg/education.svg";

instead of getting a symbol object as depicted here, I'm getting a url in the form of:

/static/media/education.3a3782a8.svg

I can't seem to find the reason causing it.
Thanks in advance.

[kisenka]

Could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

[silicakes]

@kisenka I've failed to reproduce it on a new repo as the issue was directly connected to storybook.

For future references, storybook uses file-loader to load most of its assets - including svg:

/node_modules/@storybook/react/dist/server/config/defaults/webpack.config.js

{
    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
    include: _utils.includePaths,
    loader: require.resolve('file-loader'),
    query: {
      name: 'static/media/[name].[hash:8].[ext]'
    }
  }

my workaround was to override the default rule set by applying my loaders directly onto their webpack override module, located under .storybook/webpack.config.js:

const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);

  //overriding configs rule set rather than pushing additional rules to it
  config.module.rules = [{
    test: /\.(ts|tsx)$/,
    loader: require.resolve('ts-loader')
  },{
    test: /\.svg$/,
    use: [
      {
        loader: 'svg-sprite-loader',
        options: {
          extract: true,
          spriteFilename: "icon.svg"
        }
      }, {
        loader: 'svgo-loader',
        options: {
          plugins: [
            { removeTitle: true },
            { convertColors: { shorthex: false } },
            { convertPathData: false }
          ]
        }
      }]
  }];
  config.plugins.push(new SpriteLoaderPlugin());
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

Thanks!

[Under-Warz]

@silicakes and futher readers, I resolved my issue with overriding svg loader in storybook with this answer storybookjs/storybook#6758 (comment)

[Pet3ris]

This is the full implementation if someone is interested:

  config.module.rules = config.module.rules.map(rule => {
    if (rule.test.toString().includes('svg')) {
      const test = rule.test.toString().replace('svg|', '').replace(/\//g, '')
      return { ...rule, test: new RegExp(test) }
    } else {
      return rule
    }
  });

  config.module.rules.push(
    {  
      test: /\.svg$/i,
      loader: require.resolve('svg-sprite-loader')
    }
  );

[dskline]

Probably due to a recent update, one of the webpack rules in the default storybook config has a rule.test that returns undefined now. I made a small tweak to the if statement:

  config.module.rules = config.module.rules.map((rule) => {
    if (rule.test && rule.test.toString().includes("svg")) {
      const test = rule.test.toString().replace("svg|", "").replace(/\//g, "");
      return { ...rule, test: new RegExp(test) };
    } else {
      return rule;
    }
  });

  config.module.rules.push({
    test: /\.svg$/,
    loader: require.resolve("svg-sprite-loader"),
  });