尝试在 Storybook 中使用 svgr rollup 加载器时出错

Question

我正在使用 rollup 来构建 TypeScript React 组件库。我想使用 Storybook 测试这些组件。

@svgr/webpack

加载器工作正常，但如果我用

@svgr/rollup

替换它，我会收到错误：

模块构建失败：错误：最终加载器（./node_modules/@svgr/rollup/dist/index.js）没有返回缓冲区或字符串

由于我使用 rollup 构建库，因此我想使用相同的 svgr 加载器来使 Storybook 测试保持一致。

这是我的故事书

main.ts

文件

import type { StorybookConfig } from "@storybook/react-webpack5";

const config: StorybookConfig = {
  stories: [
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {
    },
  },
  docs: {
    autodocs: "tag",
  },
  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 !== '...' && rule.test && rule.test instanceof RegExp && rule.test.test('.svg'));
    if (fileLoaderRule && fileLoaderRule !== '...') {
      fileLoaderRule.exclude = /\.svg$/;
    }
    config.module?.rules?.push({
      test: /\.svg$/,
      enforce: 'pre',
      use: {
        //loader: require.resolve('@svgr/webpack') // works
        loader: require.resolve('@svgr/rollup') // does not work
      }
    });

    return config;
  }
};
export default config;

我希望我可以更换用于 SVG 文件的加载器，但发现事实并非如此。

Answer 1

您找到问题的解决方案了吗？