Storybook: Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/arrow-right.981294d1.svg') is not a valid name.

[tranthaison1231]

I have error in storybook when config svgr webpack for project.

This is my config

const path = require('path');

module.exports = async ({ config }) => {
  config.module.rules.push(
    {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    },
    {
      test: /\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            icon: true,
          },
        },
      ],
    }
  );
  config.resolve.extensions.push('.js', '.jsx', '.svg');
  config.resolve.modules.push(path.resolve('.'));
  return config;
};

[josephchenghandshakes]

Hi @tranthaison1231 , do you have the solution for the error?

[GR34SE]

Hi @tranthaison1231 , do you have the solution for the error?

This solution worked for me:
https://stackoverflow.com/a/61706308/10331102

add the following to yours storybook's webpackFinal config:

        const fileLoaderRule = config.module.rules.find(
            (rule) => rule.test && rule.test.test(".svg")
        );
        fileLoaderRule.exclude = /\.svg$/;

        config.module.rules.push({
            test: /\.svg$/,
            enforce: "pre",
            loader: require.resolve("@svgr/webpack")
        });

[andyford]

Just ran into this with a Preact project.

solution was the same as was posted by @GR34SE but with a different loader

{
  test: /\.svg$/,
  enforce: 'pre',
  use: ['preact-svg-loader'],
}