从库中导入组件时出错

oxcyiej7  于 2022-10-21  发布在  其他
关注(0)|答案(2)|浏览(186)

bounty 6天后到期。对这个问题的回答有资格获得+100的声誉奖励。David Díaz正在寻找来自可靠来源的答案

我正在使用这个使用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.S.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:类型无效--应为字符串(对于内置组件)或类/函数(对于复合组件),但GET:未定义。您可能忘记了从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
我还必须提到,以相同方式导出的其他组件在两个应用程序上都运行得很好。
有什么主意吗?谢谢。

nxowjjhe

nxowjjhe1#

在浏览他们的文档时,它说Dialog.Overlayv1.6(2022年4月25日发布)的弃用版本。正如您所说,它可以在其他Next.js项目上使用,但不能在新的CRA中使用,可能是您使用这个旧的Dialog.Overlay构建的组件。如果是,请使用Release Notes中的迁移指南。

bvk5enib

bvk5enib2#

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

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

如果它不起作用,那么您的问题可能是特定于打字稿的。

相关问题