reactjs - TypeScriptでReact.lazyを使用する

私はTypeScriptのReactアプリでコード分割のためにReact.lazyを使おうとしています。

私がしているのはその行を変更することだけです：

import {ScreensProductList} from "./screens/Products/List";

この行まで：

const ScreensProductList = lazy(() => import('./screens/Products/List'));

しかし、import('./screens/Products/List') の部分は、次のような TypeScript エラーを引き起こします:

Type error: Type 'Promise<typeof import("/Users/johannesklauss/Documents/Development/ay-coding-challenge/src/screens/Products/List")>' is not assignable to type 'Promise<{ default: ComponentType<any>; }>'.
  Property 'default' is missing in type 'typeof import("/Users/johannesklauss/Documents/Development/ay-coding-challenge/src/screens/Products/List")' but required in type '{ default: ComponentType<any>; }'.

ここでそれを動かすために自分が何をすべきか、よく分かりません。

回答 #1

あなたは export class ScreensProductList {...} の代わりに、./screens/Products/list から export default class {...} を使用すべきです。

あるいは、次のようにすることもできます:

const ScreensProductList = lazy(() =>
  import('./screens/Products/List')
    .then(({ ScreensProductList }) => ({ default: ScreensProductList })),
);

回答 #2

1つのオプションは、次のように「./screens/Products/List」にデフォルトエクスポートを追加することです

export default ScreensProductList;

二つ目はインポートコードを変更することです

const ScreensProductList = React.lazy(() =>
  import("./screens/Products/List").then((module) => ({
    default: module.ScreensProductList,
  }))
);

あるいは、外部ライブラリを使ってもかまわないのであれば、次のようにすることができます:

import { lazily } from 'react-lazily';
const { ScreensProductList } = lazily(() => import('./screens/Products/List'));