Storybook无法访问__WEBPACK_DEFAULT_EXPORT__的循环依赖问题求助

我在多个项目中使用了所谓的「桶式依赖（barrel dependencies）」——即通过单个文件导出多个组件，以简化导入操作，示例如下：

// src/components/flexibleBlocks/index.js
export { default as Embed } from './Embed/Embed';
export { default as Image } from './Image/Image';
export { default as Text } from './Text/Text';
export { default as Video } from './Video/Video';

这意味着我无需编写：

import Embed from 'src/components/flexibleBlocks/Embed/Embed';
import Image from 'src/components/flexibleBlocks/Image/Image';
import Text from 'src/components/flexibleBlocks/Text/Text';
import Video from 'src/components/flexibleBlocks/Video/Video';

只需这样导入即可：

import { Embed, Image, Text, Video } from 'src/components/flexibleBlocks';

该方式运行正常，无任何问题。

我的应用和网站常需展示CMS生成的内容，页面结构由内容编辑器定义，无法硬编码。

我使用以下组件遍历内容：

// src/components/resolvers/FlexibleContentLoop.js
import { FlexibleContentResolver } from 'src/components/resolvers';

const FlexibleContentLoop = ({ flexible_content }) => {
  if (flexible_content) {
    return (
      <>
        {flexible_content.map((props, i) => (
          <FlexibleContentResolver
            key={i}
            {...props}
          />
        ))}
      </>
    );
  }
};

export default FlexibleContentLoop;

并使用以下组件为上述循环中的每个条目渲染对应组件：

// src/components/resolvers/FlexibleContentResolver.js
import * as blocks from 'src/components/flexibleBlocks';
import { Missing } from 'src/components/partials';

const FlexibleContentResolver = (props) => {
  const { componentName } = props;
  let Component;
  if (componentName in blocks) {
    Component = blocks[componentName];
    return <Component {...props} />;
  } else {
    return <Missing>Missing block: {componentName}</Missing>;
  }
};

export default FlexibleContentResolver;

这是处理CMS灵活内容的优雅方案，我已在Create React App、Next.js、Gatsby等工具中使用多年，未出现问题。

但Storybook似乎不兼容该模式，我认为根源在于循环依赖。

我设置了组件可嵌套循环，示例如下：

// src/components/flexibleBlocks/DynamicBlock/DynamicBlock.js
import { FlexibleContentLoop } from 'src/components/resolvers';

const DynamicBlock = ({ layouts }) => {
  return (
    <div>{layouts && <FlexibleContentLoop flexible_content={layouts} content_type="layout" />}</div>
  );
};

export default DynamicBlock;

我理解这会形成循环依赖，但该模式有效，且组件自嵌套是合理的设计模式。

我遇到两类错误：

ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
  at Module.default (http://localhost:6006/src_components_resolvers_index_js.iframe.bundle.js:113:42)
  at Module.AgeScreen (http://localhost:6006/src_components_resolvers_index_js.iframe.bundle.js:773:111)
  at registerExportsForReactRefresh (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-dafa79.iframe.bundle.js:796:36)
  at Object.executeRuntime (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-dafa79.iframe.bundle.js:828:3)
  at $ReactRefreshModuleRuntime$ (http://localhost:6006/src_components_resolvers_index_js.iframe.bundle.js:806:34)
  at ./src/components/flexibleBlocks/index.js (http://localhost:6006/src_components_resolvers_index_js.iframe.bundle.js:819:2)
  at options.factory (http://localhost:6006/runtime~main.iframe.bundle.js:642:31)
  at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
  at fn (http://localhost:6006/runtime~main.iframe.bundle.js:299:21)
  at ./src/components/resolvers/FlexibleContentResolver.js (http://localhost:6006/src_components_resolvers_index_js.iframe.bundle.js:2594:87)

以及：

TypeError
Cannot read properties of undefined (reading 'default')
Call Stack
 Module.FlexibleContentResolver
  src_components_resolvers_index_js.iframe.bundle.js:2808:129
 undefined
  src_components_resolvers_index_js.iframe.bundle.js:2519:182
 FlexibleContentLoop
  src_components_resolvers_index_js.iframe.bundle.js:2519:34
 renderWithHooks
  vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-dafa79.iframe.bundle.js:58411:18
 mountIndeterminateComponent
  vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-dafa79.iframe.bundle.js:62175:13
 beginWork
  vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-dafa79.iframe.bundle.js:63688:16
 HTMLUnknownElement.callCallback
  vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-dafa79.iframe.bundle.js:46270:14
 Object.invokeGuardedCallbackDev
  vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-dafa79.iframe.bundle.js:46319:16
 invokeGuardedCallback
  vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-dafa79.iframe.bundle.js:46383:31

请问是否有办法让Storybook兼容我的灵活块组件？

我认为CMS驱动的嵌套灵活块场景无替代方案，且该模式在其他React工具中均正常运行，希望能找到Storybook的兼容方法。

感谢您的帮助。

内容的提问来源于stack exchange，提问作者Alex