loadable import error

Question

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 를 설정안해서 설명부탁드려도 될까요?

zerocho · Answer

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

ryosuke kureha · Answer

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