类型 'typeof import("...")' 中缺少属性 'default'，但类型 '{ default: ComponentType<any>; 中需要属性 'default' }'

Question

当我尝试使用以下命令将一个 React 组件导入另一个组件时出现 TypeScript 错误React.lazy

模板/BugReport/index.tsx

import { useEffect, useContext } from 'react';
import BugReportStatic from '@tamm/ui-lib-v2-bug-report';
import baseUrl from 'client/utils/baseUrl';
import { StoreContext } from 'client/services/context';

function BugReport() {
  const store = useContext(StoreContext);
  useEffect(() => {
    BugReportStatic.init({
      bugReportIntegrationApi: `${baseUrl}/pub/feedback/bugReport`,
      store,
      isStore: !!store,
    });
    return () => {
      BugReportStatic.destroy();
    };
  }, []);
  return null;
}

export default BugReport;

模板/页脚/index.tsx

const BugReport = lazy(() =>
  import(/* webpackChunkName: "bug-report" */ 'client/templates/BugReport'),
);

Footer尽管我有默认导出，但我收到 TypeScript 错误BugReport

Type 'Promise<typeof import("/Users/hayksimonyan/Desktop/JTUpdates/dcd/src/client/templates/BugReport/index")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Property 'default' is missing in type 'typeof import("/Users/hayksimonyan/Desktop/JTUpdates/dcd/src/client/templates/BugReport/index")' but required in type '{ default: ComponentType<any>; }'.ts(2322)
index.d.ts(789, 34): 'default' is declared here.
index.d.ts(789, 18): The expected type comes from the return type of this signature.
module "/Users/hayksimonyan/Desktop/JTUpdates/dcd/src/client/templates/BugReport/index"

这里需要注意的是，我index.ts在 BugReport 文件夹中也有文件，当我删除该文件时，错误就会消失，但它需要在那里

Answer 1

我知道我回答得太晚了，但也许其他人将来也会遇到同样的问题，就像我刚才所做的并自己解决的那样，但不是在进入此页面并且没有找到任何答案之前。

是什么导致了您的问题

您正在使用 Typescript，而无需将函数键入为 React 组件。

React.lazy() 期望 React 组件作为输入。

由于您的函数返回 null 并且未键入，React.Lazy 无法知道它是 React 组件。

解决方案

要解决这个问题，您可以：

选项 1 -将返回值从 null 更改为片段，例如return <></>;, 或

选项 2 -从函数组件切换到类组件。由于 Clas 组件必须有一个方法，因此即使使用或，render()它也会被检测为 React 组件return null;

选项 3 - 切换到箭头函数并向其添加类型，例如 React.FC 或 React.FunctionComponent。-const BugReport: FC = () => null;

对于未来进入这里的任何人。在我输入时，为了让 React.lazy() 工作，你应该遵循上面提到的三个选项之一，并且，正如 @Hayk 所说，你的组件必须有一个export default YourComponent.