소개

오류 내용

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

여담

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

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

안내

해당 글은 '도다 Aha!'에서 이전된 글입니다. 이전 글과 달라진 부분이 있을 수 있습니다.

태그
typescript
next.js
반응과 댓글 시스템은 Giscus에 의해 호스팅되며, 모든 대화는 GitHub에 저장됩니다.

출처가 명확하지 않은 내용을 신뢰하지 마세요. 글 작성자는 이로 인해 발생하는 책임을 지지 않습니다.

피드백 무엇이든 환영합니다 🤗

doda.devlicensegithubmade with ☕️