为什么semantic-ui-react有循环依赖，使用webpack时如何解决这个问题？

Question

我在基于 create-react-app 的 React 应用程序中使用语义-ui-react。我遇到了一个问题，仅使用

<CardGroup>

或

<StepGroup>

等组件会引发通用且不幸的是无用的错误消息：

ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

在用头撞墙几个小时后，我终于发现这些组件之间存在循环依赖关系，分别是

<Card>

和

<Step>

。

然后我偶然发现了这个旧的 github 问题，以及这个有趣的评论。我很想在这里了解两件事：

1. 设计的哪些方面使得这个问题很难解决？
2. 这如何/应该与 webpack 一起使用？

Answer 1

对于上述问题并没有真正的答案，但是对于仍然遇到此错误的任何可怜的灵魂，请尝试使用：

import { Card } from "semantic-ui-react";

...

return (<Card.Group> <Card header="Some header" /> </Card.Group>);

而不是直接导入CardGroup组件。