故事书:无法使用 @svgr/webpack 对 svg 文件执行“createElement" [英] Storybook: Failed to execute 'createElement' on svg files using @svgr/webpack
问题描述
我的错误首先与描述的完全相同 此处.我正在使用 @svgr/webpack 包来导入我的 .svg
文件作为这样的 React 组件:
My error in the first place is exactly the same as the one described here. I'm using the @svgr/webpack package to import my .svg
files as a React component like that:
import Shop from './icons/shop.svg'
return <Shop />
它在我的应用程序上运行良好,但是当我尝试在 Storybook 中执行相同操作时出现此错误:
It works fine on my app but when I tried to do the same in Storybook I get this error:
未能在文档"上执行createElement":提供的标签名称 (static/media/shop.61b51e05.svg") 不是有效名称.
Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/shop.61b51e05.svg') is not a valid name.
所以我将加载器添加到我的 .storybook/main.js
文件中以扩展默认的 Storybook webpack 配置:
So I added the loader into my .storybook/main.js
file to extends the default Storybook webpack config:
// ...
webpackFinal: async config => {
config.module.rules.push({
test: /\.svg$/,
enforce: 'pre',
loader: require.resolve('@svgr/webpack'),
});
错误仍然发生,因此我尝试按照 .svg 文件的默认 Storybook 测试>上一个问题的答案:
The error still occurred so I tried to override the default Storybook test for .svg
files as suggested in the answer of the previous question:
const fileLoaderRule = config.module.rules.find(rule => { rule.test !== undefined ? rule.test.test('.svg') : '' });
fileLoaderRule.exclude = /\.svg$/;
但后来我收到此错误:
类型错误:无法设置未定义的属性排除"
TypeError: Cannot set property 'exclude' of undefined
所以我决定制作 rule.test
的 console.log
奇怪的是,来自 Storybook 配置的唯一默认测试是这些:
So I decided to make a console.log
of the rule.test
and strangely the only default tests coming from Storybook config are theses:
{
test: /\.md$/,
...
}
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
...
}
{
test: /\.js$/,
...
}
{
test: /\.(stories|story).mdx$/,
...
}
{
test: /\.mdx$/,
...
}
{
test: /\.(stories|story)\.[tj]sx?$/,
...
}
{
test: /\.(ts|tsx)$/,
...
}
如您所见,没有测试会影响 .svg
文件.那么有人知道为什么我的配置无法使用:
As you can see there is no test that affects a .svg
file. So does someone have an idea why my configuration is not working using:
{
test: /\.svg$/,
enforce: 'pre',
loader: require.resolve('@svgr/webpack'),
}
我的故事书版本是6.0.0-beta.3
.
推荐答案
你的 find
回调总是返回 undefined
.更改它以返回正确的布尔值:
Your find
callback always returns undefined
. Change it to return correct bool:
const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
无论如何,故事书的默认配置应该有一个规则来处理这个测试的图像:/\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
.所以你的代码(但有正确的 find 回调)对我来说很好.
Anyway storybook default config should have a rule for images with this test:
/\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
.
So your code (but with correct find callback) works fine for me.
最终的main.js
:
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
webpackFinal: config => {
// Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
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'),
});
return config;
}
};
这篇关于故事书:无法使用 @svgr/webpack 对 svg 文件执行“createElement"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!