TypeError: getComponent is not a function

[stevenmusumeche]

I am trying this library for the first time and am receiving an error. I replaced this existing import, which works:

import RefreshRequired from './RefreshRequired/RefreshRequired';

with this:

const LoadableComponent = loadable(import('./RefreshRequired/RefreshRequired'));

But I receive this error. I am using React 16.

Uncaught TypeError: getComponent is not a function
    at Function.load (loadable.js:61)
    at LoadableComponent.componentWillMount (loadable.js:79)
    at LoadableComponent.componentWillMount (createPrototypeProxy.js:44)
    at callComponentWillMount (react-dom.development.js:9777)
    at mountClassInstance (react-dom.development.js:9834)
    at updateClassComponent (react-dom.development.js:10216)
    at beginWork (react-dom.development.js:10605)
    at performUnitOfWork (react-dom.development.js:12573)
    at workLoop (react-dom.development.js:12682)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
load @ loadable.js:61
componentWillMount @ loadable.js:79
componentWillMount @ createPrototypeProxy.js:44
callComponentWillMount @ react-dom.development.js:9777
mountClassInstance @ react-dom.development.js:9834
updateClassComponent @ react-dom.development.js:10216
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
a.bugsnag @ bugsnag-3.min.js:1
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
enqueueSetState @ react-dom.development.js:9646
webpackJsonp../node_modules/react/cjs/react.development.js.ReactComponent.setState @ react.development.js:218
onStateChange @ connectAdvanced.js:205
onStateChange @ createPrototypeProxy.js:44
dispatch @ createStore.js:186
dispatch @ VM8639:2
(anonymous) @ breadcrumbLogger.js:16
(anonymous) @ webrtcVideo.js:106
(anonymous) @ index.js:14
(anonymous) @ errorCatcher.js:26
dispatch @ applyMiddleware.js:45
(anonymous) @ conversationsActions.js?4cf9:112
Promise resolved (async)
(anonymous) @ conversationsActions.js?4cf9:112
(anonymous) @ index.js:11
(anonymous) @ errorCatcher.js:26
dispatch @ VM8639:2
(anonymous) @ bindActionCreators.js:7
Promise resolved (async)
(anonymous) @ index.jsx:80
Promise resolved (async)
(anonymous) @ index.jsx:76
Promise resolved (async)
PlainChatApp @ index.jsx:73
instantiate @ createClassProxy.js:91
PlainChatApp @ VM9436:4
constructClassInstance @ react-dom.development.js:9760
updateClassComponent @ react-dom.development.js:10215
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
a.bugsnag @ bugsnag-3.min.js:1
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
scheduleTopLevelUpdate @ react-dom.development.js:13395
updateContainer @ react-dom.development.js:13425
(anonymous) @ react-dom.development.js:17105
unbatchedUpdates @ react-dom.development.js:13256
renderSubtreeIntoContainer @ react-dom.development.js:17104
render @ react-dom.development.js:17129
renderApp @ index.jsx:23
./public/index.jsx @ index.jsx:35
__webpack_require__ @ bootstrap 43a581b6ca41ecf5e187:693
fn @ bootstrap 43a581b6ca41ecf5e187:114
2 @ chat-bundle.js:31613
__webpack_require__ @ bootstrap 43a581b6ca41ecf5e187:693
webpackJsonpCallback @ bootstrap 43a581b6ca41ecf5e187:25
(anonymous) @ chat-bundle.js:1
bugsnag-3.min.js:1 The above error occurred in the <LoadableComponent> component:
    in LoadableComponent (created by AppHeader)
    in div (created by AppHeader)
    in AppHeader (created by PlainChatApp)
    in div (created by PlainChatApp)
    in PlainChatApp (created by DragDropContext(PlainChatApp))
    in DragDropContext(PlainChatApp) (created by Connect(DragDropContext(PlainChatApp)))
    in Connect(DragDropContext(PlainChatApp))
    in Provider
    in AppContainer
    in ErrorBoundary

[gregberge]

@stevenmusumeche what was the problem?

[stevenmusumeche]

I'm not sure, I was never able to fix it. I switched to react-loadable and that solved the problem.

[gregberge]

OK, for now it is probably the best thing to do. I will fix it in next version.

[tmartin2089]

Anyone who stumbles on this in search of answers, OP likely needed to wrap his import in an arrow function

i.e.

const LoadableComponent = loadable(() => import('./RefreshRequired/RefreshRequired'));