ReactにTypeScriptエラーを持つステートレス関数：TS2352を 'Promise <StatelessComponent <{}>>'

Question

と入力することはできません。

import * as React from 'react'; 
const Product: React.SFC<{}> =() => <div>Product</div>; 
export default Product; 

---

import { asyncComponent } from 'react-async-component'; 

const AsyncProduct = asyncComponent({ 
    name: 'AsyncProduct', 
    serverMode: 'resolve', 
    resolve:() => { 
    return import(/* webpackChunkName: "Product" */ './Product') as Promise<React.SFC<{}>>; 
    }, 
}); 

export default AsyncProduct; 

./src/AsyncProduct.tsx（7,12）：エラーTS2352：タイプ '約束' 'が約束を>' 型に変換できません。 " 'typeof "/Users/banyan/tmp/typescript-react-async-component-example/src/Product "' は 'StatelessComponent < {}>'と比較できません。 タイプ 'typeof'/Users/banyan/tmp/typescript-react-async-component-example/src/Product "' は署名に一致しません'（小児：ReactNode; ）、コンテキスト：任意）：ReactElement |ヌル'。

私はPromise<React.SFC<{}>はPromise<any>であることを変更すると、それはコンパイルすることができますが、どのように私はステートレスな機能を指定することができますか？

これはyarn startで再現する最小レポです：https://github.com/banyan/typescript-react-async-component-example

---

タイプの定義は、このようなものです：node_modules/react-async-component/index.d.ts。 async/awaitを使用して

：

/** 
* The configuration for an asynchronous component. 
*/ 
export interface Configuration<P> { 
    resolve:() => Promise<React.ComponentType<P>>; 
... 
} 

Answer 1

import機能を使用すると、モジュール（デフォルトのエクスポートまたは名前付き1）から使用したい正確に何を選択する必要があり、モジュール全体を返し

const AsyncProduct = asyncComponent({ 
    name: 'AsyncProduct', 
    serverMode: 'resolve', 
    resolve: async() => { 
    var module = await import('./Product'); 
    return module.default; 
    }, 
}); 

またはその後で：

const AsyncProduct2 = asyncComponent({ 
    name: 'AsyncProduct', 
    serverMode: 'resolve', 
    resolve:() => { 
    return import('./Product').then(m=> m.default); 
    }, 
});