• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

loadable import error

21.06.26 16:28 작성 조회수 235

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

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