React Storybook SVG 无法在“文档"上执行“createElement"

问题描述

我正在尝试将 Storybook 添加到现有的 React 应用程序，但在导入 svg 文件时出现错误.svg 被导入并使用如下:

从'./images/border.inline.svg'导入边框...<Border className="card__border"/>

这在应用程序运行和构建时有效，但我在 Storybook 中遇到错误.怎么来的?

无法在文档"上执行createElement":提供的标记名称 (static/media/border.inline.258eb86a.svg") 不是有效名称.错误:无法在文档"上执行createElement":提供的标记名称 (static/media/border.inline.258eb86a.svg") 不是有效名称.

默认的 webpack.config.js 有:

 ...{测试:/\.inline.svg$/,加载器:'svg-react-loader'},...

另外，现有代码使用 webpack 3，我使用的是 Storybook V4.

解决方案

这是因为 Storybook 的 默认 webpack 配置 有自己的 svg 配置:

{测试:/\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/,加载器:'文件加载器'，查询:{ name: 'static/media/[name].[hash:8].[ext]' }},

我很确定这就是原因，因为您可以看到错误消息中概述的路径:query: { name: 'static/media/[name].[hash:8].[ext]' } ->静态/媒体/border.inline.258eb86a.svg

解决办法可以是找到现有的loader &更改/或向其添加排除规则.这是自定义 .storybook/webpack.config.js 的示例:

//故事书 4module.exports = (_, _, config) =>{//故事书 5module.exports = ({ config }) =>{const 规则 = config.module.rules;//修改 storybook 的文件加载器规则以避免与内联 svg 发生冲突const fileLoaderRule = rules.find(rule => rule.test.test('.svg'));fileLoaderRule.exclude =/\.inline.svg$/;规则.push({测试:/\.inline.svg$/,...}],});返回配置；};

I'm trying to add Storybook to an existing React app but getting errors with imported svg files. The svg is imported and used like:

import Border from './images/border.inline.svg'
...
<Border className="card__border" />

This works when the app is run and built, but I get an error in Storybook. How come?

Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/border.inline.258eb86a.svg') is not a valid name.
Error: Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/border.inline.258eb86a.svg') is not a valid name.

The default webpack.config.js has:

  ...
  {
    test: /\.inline.svg$/,
    loader: 'svg-react-loader'
  },
  ...

Also, the existing code uses webpack 3, and I'm using Storybook V4.

解决方案

This is happening because Storybook's default webpack config has its own svg config:

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

I'm pretty sure this is the cause, because you can see the path outlined in error message: query: { name: 'static/media/[name].[hash:8].[ext]' } -> static/media/border.inline.258eb86a.svg

The solution can be to find the existing loader & change / or add an exclude rule to it. Here's an example of a custom .storybook/webpack.config.js:

// storybook 4
module.exports = (_, _, config) => {
// storybook 5
module.exports = ({ config }) => {
  const rules = config.module.rules;

  // modify storybook's file-loader rule to avoid conflicts with your inline svg
  const fileLoaderRule = rules.find(rule => rule.test.test('.svg'));
  fileLoaderRule.exclude = /\.inline.svg$/;

  rules.push({
    test: /\.inline.svg$/,
    ...
    }],
  });

  return config;
};

这篇关于React Storybook SVG 无法在“文档"上执行“createElement"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！