Next.js Dynamic Import를 TypeScript에서 사용할 시의 타입 오류
오류 내용
Argument of type '() => Promise<ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; } | ((props: PageProps) => JSX.Element)>' is not assignable to parameter of type 'DynamicOptions<{}> | (() => LoaderComponent<{}>) | LoaderComponent<{}>'. Type '() => Promise<ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; } | ((props: PageProps) => JSX.Element)>' is not assignable to type '() => LoaderComponent<{}>'. Type 'Promise<ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; } | ((props: PageProps) => Element)>' is not assignable to type 'LoaderComponent<{}>'. Type 'ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; } | ((props: PageProps) => Element)' is not assignable to type 'ComponentClass<{}, any> | FunctionComponent<{}> | { default: ComponentType<{}>; }'. Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any> | FunctionComponent<{}> | { default: ComponentType<{}>; }'. Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any>'. Types of property 'getDerivedStateFromProps' are incompatible. Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'. Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'. Types of parameters 'nextProps' and 'nextProps' are incompatible. Type 'Readonly<{}>' is not assignable to type 'never'.
Next.js의 Dynamic Import 기능을 TypeScript와 함께 사용할 때의 오류.
오류 코드
import dynamic from "next/dynamic";const Named = dynamic(() => import("./Named").then(module => module.Named));
해결법
const MyComponent = dynamic<PropsType>(() => import("./Named").then(module => module.Named));
dynamic
에 컴포넌트의 Props을 넣어주어야 한다.
export const Named = ({ propItem }: PropsType) => { return <span>{propItem}</span>;}
그럼 자식 컴포넌트인 Named는 이렇게 작성해주면 되겠다.
만약, Props가 없는 경우엔?
{}
타입을 쓰면 된다.
만약, typescript-eslint가 ban-types 룰 오류를 낸다면 다음 깃헙 이슈의 코멘트를 참고하자.
여담
이런 중요한 걸 도큐멘트에 넣어야하지 않을까. 이걸 왜 직접 찾아보게 만드는지.
어쨋든... 다음 이슈에서 해결법을 찾았다.