找不到模块“@babel/plugin-proposal-private-property-in-object”

Question

我添加@storybook/preset-create-react-app到我的插件中，因为我希望故事书能够与 React/CRA 一起使用。基本上，我尝试以与 CRA 相同的方式导入 SVG。

import SomeSvgStaticUrl, { ReactComponent as SomeSvgReactComponent } from '../assets/icons/some-icon.svg';

SomeSvgStaticUrl- 默认情况下工作正常（返回字符串静态 URL，与 一起工作正常<img src={SomeSvgStaticUrl} />，但不是我想要的）

SomeSvgReactComponent-undefined默认情况下

因此，我决定更新 webpack 配置以添加 SVG 加载器，

import SomeSvgStaticUrl, { ReactComponent as SomeSvgReactComponent } from '../assets/icons/some-icon.svg';

就像故事书的魅力一样，但默认导入（SomeSvgStaticUrl在本例中），它返回 ReactComponent 而不是静态 URL。并且SomeSvgReactComponent是undefined。没问题，但是当主机应用程序使用具有默认 React/CRA 配置的包时，它不起作用。主机应用程序获取以下内容，

SomeSvgStaticUrl- 静态网址

SomeSvgReactComponent- 反应组件

如果我从包中删除 SVG 加载器，它在主机应用程序上可以正常工作，但在故事书上则不行。当我保留 SVG 加载器时，它可以与故事书一起正常工作，但不能与主机应用程序一起工作。

我真的不想强制所有主机应用程序通过其 webpack 配置使用相同的 SVG 加载器。有什么帮助可以帮助您做什么或者让故事书 SVG 加载器以与 React/CRA 加载器相同的方式工作的最佳方法是什么？

套餐详情

webpackFinal: async config => {
    console.log(config.module.rules);
    // const assetRule = config.module.rules.find(({ test }) => test.test(".(svg"));
    // const assetLoader = {
    //     loader: assetRule.loader,
    //     options: assetRule.options || assetRule.query
    // };
    config.module.rules.unshift({
        test: /\.svg$/,
        use: ['@svgr/webpack'] // ['@svgr/webpack', assetLoader],
    });
    config.module.rules = [{ oneOf: config.module.rules }];
    return config;
},