从库导入组件时出错答案

【问题标题】：Error while importing component from library从库导入组件时出错
【发布时间】：2022-10-19 22:29:36
【问题描述】：

我正在研究这个使用tsdx 的组件库，除了这个之外，所有组件都可以正常工作。这是一个使用@headlessui/react 库的对话框，它是Dialog 组件。它是这样导出的：

DialogBase.Content = DialogContent;
DialogBase.Actions = DialogActions;
DialogBase.Description = DialogDescription;

export default DialogBase;

然后，在index.ts 文件中，我必须导出所有组件以公开它们，它的导出如下：

export { default as DialogBase } from './DialogBase';

一切正常，但是当我尝试在不同的项目中使用该组件时，出现此错误：

未捕获的 TypeError：无法访问属性“Overlay”，u.Dialog 未定义

这很奇怪，因为该组件在其他 Nextjs 项目上运行良好，但在这个项目上却不行（这个是 CRA）。

有任何想法吗？谢谢。

【问题讨论】：

标签： reactjs next.js rollup headless-ui tsdx

【解决方案1】：

在浏览他们的docs 时，它说Dialog.Overlay 已被v1.6 弃用（2022 年 4 月 25 日发布）。正如您所说，它适用于其他 Next.js 项目，但不适用于新的 CRA，可能是您构建的组件使用了这个旧的 Dialog.Overlay。如果是，请使用Release Notes 中的迁移指南。

【讨论】：

我也试过了，但没有运气。

【解决方案2】：

尝试这个。这不是一个很好的解决方案，但如果它有效，您至少可以确定问题出在转译上，如果是这样，那么您的首选语法可能会在 Babel 插件的帮助下工作。

import DialogBase from './DialogBase';
export { DialogBase }

如果它不起作用，那么您的问题可能是特定于 TypeScript 的。

【讨论】：

尝试更改导出但它不起作用，还尝试使用与其他项目相同的 ts-config 并且也不起作用。