💡Aha!

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 룰 오류를 낸다면 다음 깃헙 이슈의 코멘트를 참고하자.

여담

이런 중요한 걸 도큐멘트에 넣어야하지 않을까. 이걸 왜 직접 찾아보게 만드는지.

어쨋든... 다음 이슈에서 해결법을 찾았다.

2024 Dohyun Jung.
Made with ☕️.