Question

我正在使用React / Styled-Components制作一个半复杂的片段。我总是尝试通过导出样式化的任何子组件来提高较大的Fragments / Components的灵活性，以便在我的团队需要类似组件时可以轻松地在DOM树中的任何地方进行较小的调整。

我这样做是通过将所有内容收集到索引文件中，并按照本Mozilla文章结尾所述的那样使用模块重定向来实现的：

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

但是，由于某些原因，当我尝试执行export { SomeComponent, SomeOtherComponent } from './SomeStuff.styled'或export * from './SomeStuff.styled'时，出现错误Cannot create styled-component for component: undefined.

我在做什么错了？

该项目为封闭源，因此我无法显示完整文件或存储库 ./ListElement中的所有出口均被命名为出口。

// In index.js
export { default as Counter } from './Counter';
export { Element, Container, Names, Prices } from './ListElement';
export { default as OrderListHeading } from './OrderListHeading';

// In the Fragment where I'm using it
import { Counter, Element } from '.';

...

const Heading = styled(Element)``;

奇怪的是，如果我这样单独导入和导出，它会起作用：

// In index.js
import { Element, Container, Names, Prices } from './ListElement';

export { default as Counter } from './Counter';
export { Element, Container, Names, Prices };
export { default as OrderListHeading } from './OrderListHeading';

Answer 1

export { default as Counter } from './Counter';
export { Element, Container, Names, Prices } from './ListElement';
export { default as OrderListHeading } from './OrderListHeading';

当前ECMAScript标准中尚未提供此功能。仍然是a proposal in stage 1。为了使语言功能提案符合当前的ECMAScript标准，它必须进入第4阶段。

您可能正在使用不支持此功能的项目配置。但是，如果您可以扩展Babel配置，则可以通过安装@babel/plugin-proposal-export-default-from开始使用此功能。

模块重定向命名出口的问题

1 个答案: