title: Storybook: Failed to execute 'createElement' on svg files using @svgr/webpack
body: <p>My error in the first place is exactly the same as the one described <a href="https://stackoverflow.com/questions/54292667/react-storybook-svg-failed-to-execute-createelement-on-document">here</a>. I'm using the <a href="https://www.npmjs.com/package/@svgr/webpack" rel="noreferrer">@svgr/webpack</a> package to import my <code>.svg</code> files as a React component like that:</p>
  <pre class="lang-js prettyprint-override"><code>import Shop from './icons/shop.svg'
  
  return &lt;Shop /&gt;
  </code></pre>
  <p>It works fine on my app but when I tried to do the same in <a href="https://storybook.js.org/" rel="noreferrer">Storybook</a> I get this error:</p>
  <blockquote>
  <p>Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/shop.61b51e05.svg') is not a valid name.</p>
  </blockquote>
  <p>So I added the loader into my <code>.storybook/main.js</code> file to extends the default Storybook webpack config:</p>
  <pre class="lang-js prettyprint-override"><code>// ...
  webpackFinal: async config =&gt; {    
      config.module.rules.push({
        test: /\.svg$/,
        enforce: 'pre',
        loader: require.resolve('@svgr/webpack'),
      });
  </code></pre>
  <p>The error still occurred so I tried to override the default Storybook test for <code>.svg</code> files as suggested in the <a href="https://stackoverflow.com/a/54292998/8583669">answer of the previous question</a>:</p>
  <pre class="lang-js prettyprint-override"><code>const fileLoaderRule = config.module.rules.find(rule =&gt; { rule.test !== undefined ? rule.test.test('.svg') : '' });
  fileLoaderRule.exclude = /\.svg$/;
  </code></pre>
  <p>But then I get this error:</p>
  <blockquote>
  <p>TypeError: Cannot set property 'exclude' of undefined</p>
  </blockquote>
  <p>So I decided to make a <code>console.log</code> of the <code>rule.test</code> and strangely the only default tests coming from Storybook config are theses:</p>
  <pre class="lang-js prettyprint-override"><code>{
    test: /\.md$/,
    ...
  }
  {
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    ...
  }
  {
    test: /\.js$/,
    ...
  }
  {
    test: /\.(stories|story).mdx$/,
    ...
  }
  {
    test: /\.mdx$/,
    ...
  }
  {
    test: /\.(stories|story)\.[tj]sx?$/,
    ...
  }
  {
    test: /\.(ts|tsx)$/,
    ...
  }
  </code></pre>
  <p>As you can see there is no test that affects a <code>.svg</code> file. So does someone have an idea why my configuration is not working using:</p>
  <pre class="lang-js prettyprint-override"><code>{
    test: /\.svg$/, 
    enforce: 'pre',
    loader: require.resolve('@svgr/webpack'),
  }
  </code></pre>
  <p>My storybook version is <code>6.0.0-beta.3</code>.</p>