인프런 커뮤니티 질문&답변

ryosuke kureha님의 프로필 이미지
ryosuke kureha

작성한 질문수

Slack 클론 코딩[실시간 채팅 with React]

Q&A(CRA를 안 쓰는 이유)

loadable import error

작성

·

317

0

import { Switch, Route, Redirect } from 'react-router-dom'
// import Login from '@pages/Login'
// import SignUp from '@pages/SignUp'
const Login = loadable(() => import('@pages/Login')) // next dynamic import ?
const SignUp = loadable(() => import('@pages/SignUp'))
No overload matches this call.
Overload 1 of 3, '(loadFn: (props: unknown) => Promise<DefaultComponent<unknown>>, options?: OptionsWithoutResolver<unknown> | undefined): LoadableComponent<unknown>', gave the following error.
Type 'Promise<typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")>' is not assignable to type 'Promise<DefaultComponent<unknown>>'.
Type 'typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")' is not assignable to type 'DefaultComponent<unknown>'.
Property 'default' is missing in type 'typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")' but required in type 'DefaultImportedComponent<unknown>'.
Overload 2 of 3, '(loadFn: (props: any) => Promise<ComponentClass<any, any> | { default: ComponentClass<any, any>; }>, options?: Options<any, ComponentClass<any, any>> | undefined): LoadableClassComponent<...>', gave the following error.
Type 'Promise<typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")>' is not assignable to type 'Promise<ComponentClass<any, any> | { default: ComponentClass<any, any>; }>'.
Type 'typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")' is not assignable to type 'ComponentClass<any, any> | { default: ComponentClass<any, any>; }'.
Property 'default' is missing in type 'typeof import("/Users/ohyunseok/Documents/PROJECT/Slacku/react-frontend/pages/Login/index")' but required in type '{ default: ComponentClass<any, any>; }'.
ts(2769)
index.d.ts(11, 5): 'default' is declared here.
index.d.ts(85, 13): The expected type comes from the return type of this signature.
import error가 나는 이유가 뭔가요? 제로초님?
에러를 찾아냈습니다.
변경전
import React from 'react'

export const Login = () => {
return <div>
로그인
</div>
}
변경후,
import React from 'react'

const Login = () => {
return <div>
로그인
</div>
}

export default Login;
default 를 설정안해서 설명부탁드려도 될까요?

답변 2

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

로더블로 import할 컴포넌트는 export default로 설정해두세요.

0

답변감사합니다. 쉬시는 주말에 ㅠㅠ

ryosuke kureha님의 프로필 이미지
ryosuke kureha

작성한 질문수

질문하기