javascript - 故事书:无法使用@ svgr/webpack在svg文件上执行 'createElement'

首先，我的错误与here描述的错误完全相同。我正在使用@svgr/webpack包将我的.svg文件作为React组件导入，如下所示:

import Shop from './icons/shop.svg'

return <Shop />

它在我的应用程序上正常工作，但是当我尝试在Storybook中执行相同操作时，出现此错误:

因此，我将加载程序添加到了.storybook/main.js文件中，以扩展默认的Storybook Webpack配置:

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

该错误仍然发生，因此我尝试按照answer of the previous question中的建议覆盖.svg文件的默认Storybook测试:

const fileLoaderRule = config.module.rules.find(rule => { rule.test !== undefined ? rule.test.test('.svg') : '' });
fileLoaderRule.exclude = /\.svg$/;

但是然后我得到这个错误:

因此，我决定制作一个console.log的rule.test，奇怪的是，来自Storybook配置的唯一默认测试是这些:

{
  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文件。有人知道为什么我的配置无法使用:

{
  test: /\.svg$/,
  enforce: 'pre',
  loader: require.resolve('@svgr/webpack'),
}

我的故事书版本为6.0.0-beta.3。

最佳答案

您的find回调始终返回undefined。更改它以返回正确的 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回调)对我来说效果很好。

最终的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;
    }
};