SVG imports are undefined

Describe the bug When I import SVGs into storybook, the imports are undefined.

To Reproduce

import React from 'react'
import { storiesOf } from '@storybook/react'
import { ReactComponent as Example } from './example.svg'

console.log(Example) // undefined

Expected behavior The SVG should be imported successfully.

Code snippets If applicable, add code samples to help explain your problem.

System:

• OS: OSX
• Device: Macbook Pro 2018
• Browser: N/A
• Framework: N/A
• Addons: Not relevant
• Version: "@storybook/react": "^4.1.11"

Additional context Judging by this issue, this should be supported out of the box without a custom Webpack or Babel config.

[pedrombafonso]

For those interested, I was able to get .svg imports working using the following custom webpack config

module.exports = ({ config, mode }) => {

  config.module.rules = config.module.rules.map(rule => {
    if (!rule.test.test(".svg")) {
      return rule;
    }

    const newRule = rule;
    // Changes existing default rule to not handle SVG files
    newRule.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/;
    return newRule;
  });

  // Adds new SVG loader
  config.module.rules.push({
    test: /\.svg$/,
    use: ["@svgr/webpack", "url-loader"]
  });

  return config;
};

for reference: https://storybook.js.org/docs/configurations/custom-webpack-config/

[DimaRGB]

hey @pedrombafonso, thank you for the solution.

but let’s try to make it more adaptable:

module.exports = ({ config, mode }) => {
  const assetRule = config.module.rules.find(({ test }) => test.test('.svg'));
  const assetLoader = {
    loader: assetRule.loader,
    options: assetRule.options || assetRule.query,
  };
  config.module.rules.unshift({
    test: /\.svg$/,
    use: ['@svgr/webpack', assetLoader],
  });
  config.module.rules = [{ oneOf: config.module.rules }];

  return config;
}