TypeScript: TS 3.4: Error when passing dynamically imported generic type as a function argument
TypeScript Version: 3.4.0-dev.201xxxxx
Search Terms: TS2322, dynamic import, dynamic import never, dynamic import generic
Code
.\node_modules\.bin\tsc --jsx react --lib es2017 --strict index.tsx
// ===== page.tsx ======
import * as React from 'react'
export interface PageProps {
title: string
}
export class Page extends React.Component<PageProps> {
render() {
return <div>{this.props.title}</div>
}
}
// ===== index.tsx =====
import * as React from 'react'
import{ PageProps, Page } from './page'
export function myFunction<TProps>(loader: () => Promise<React.ComponentType<TProps>>) {
}
// No error
myFunction(() => Promise.resolve(Page))
// No error
const loader: () => Promise<React.ComponentType<PageProps>> = () => import('./page').then(m => m.Page)
// Error
myFunction(() => import('./page').then(m => m.Page))
Expected behavior:
No compile error. This was the behavior in TS 3.3 and earlier.
Actual behavior:
There is an error after upgrading to TS 3.4:
index.tsx:14:18 - error TS2322: Type 'Promise<typeof Page | ComponentClass<never, any> | FunctionComponen
t<never>>' is not assignable to type 'Promise<ComponentType<PageProps>>'.
Type 'typeof Page | ComponentClass<never, any> | FunctionComponent<never>' is not assignable to type 'C
omponentType<PageProps>'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentType<PageProps>'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<PageProps, any>'.
Type 'PageProps' is not assignable to type 'never'.
14 myFunction(() => import('./page').then(m => m.Page))
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
index.tsx:4:44
4 export function myFunction<TProps>(loader: () => Promise<React.ComponentType<TProps>>) {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The expected type comes from the return type of this signature.
Repro here: https://github.com/srmagura/ts-import-repro
About this issue
- Original URL
- State: open
- Created 5 years ago
- Reactions: 10
- Comments: 17 (12 by maintainers)
@sandersn those workarounds can’t be used by library writers but have to be known by the consumers of the library…
it is affecting a large number of people - e.g. everyone who is using nextjs with dynamic imports: https://nextjs.org/docs/advanced-features/dynamic-import
could you please consider picking up this issue once again?
Moving to 3.6 since we are out of time on 3.5, and it’s not affecting a large number of people (and there’s an easy workaround or two).
@styu
Workarounds:
avoid context by extracting
import('./page').then(m => m.Page)
:This avoids the return type inference since there is no contextual type to infer from.
provide a real or fake
onrejected
:This one is fake —
null as never
disappears nicely in the type system — but a real app should probably provide a fallback page in case the import fails.Any progress?