从库导入组件时出错

Question

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

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

export default DialogBase;

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

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

一切工作正常，但是当我尝试在不同的项目上使用该组件时，我收到此错误：

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

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

这是我的tsconfig文件

{
  "extends": "./tsconfig.extend.json",
  "compilerOptions": {
    "module": "ESNext",
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "noImplicitAny": false,
    "outDir": "./../src",
    "rootDir": "./",
    "sourceMap": true,
    "declaration": true,
    "strict": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "strictNullChecks": true,
    "jsx": "react-jsx",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "noEmit": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noFallthroughCasesInSwitch": true,
    "types": ["node", "jest", "@testing-library/jest-dom", "facebook-js-sdk"],
    "baseUrl": "./src"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

和我的tsconfig.extend文件：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@test/*": ["./__test__/*"],
      "@components/*": ["./components/*"],
      "@domain/*": ["./domain/*"],
      "@hooks/*": ["./hooks/*"],
      "@context/*": ["./context/*"],
      "@pages/*": ["./pages/*"],
      "@services/*": ["./services/*"],
      "@types/*": ["./types/*"],
      "@util/*": ["./util/*"]
    }
  }
}

正如我删除了该组件的答案之一所建议的Overlay，现在我收到此错误：

警告：React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

我还必须提到，以相同方式导出的其他组件在这两个应用程序上都运行良好。

有任何想法吗？谢谢。

Answer 1

由于某种原因，将 @headlessui 降级到 1.4（我使用的是 1.7）是有效的。