LoadableVisibilityComponent doesn't expose loadable's load function.

[trinachoudhury1mg]

I am using react-loadable-visibility to achieve lazy imports for a lot of my components and I was trying to synchronously (on a button click) , scroll the user to bottom but the components were not yet loaded so to achieve that, I was trying to benefit from loadable's load function

import loadable from "react-loadable-visibility/loadable-components"

const VideoPlayer = loadable(() => import("@components/VideoPlayer"), { ssr: false, fallback: <div></div>, })

The loadable function here returns LoadableVisibilityComponent which exposes preload method but not the load method.

const onButtonClick = () => { VideoPlayer.load().then(() => { // scroll element to view after component bundle is fetched }) }

During runtime, after button click it throws ->

index.js:1924 Uncaught TypeError: VideoPlayer.load is not a function
at eval (index.js:1924)
at Array.forEach ()
at scrollToAccordion (index.js:1923)
at redirect (index.js:2174)
at handleClick (FactBox.js:143)
at onClick (FactBox.js:214)
at HTMLUnknownElement.callCallback (react-dom.development.js:189)
at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
at invokeGuardedCallback (react-dom.development.js:293)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:307)
eval @ index.js:1924
scrollToAccordion @ index.js:1923
redirect @ index.js:2174
handleClick @ FactBox.js:143
onClick @ FactBox.js:214
callCallback @ react-dom.development.js:189
invokeGuardedCallbackDev @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:307
executeDispatch @ react-dom.development.js:390
executeDispatchesInOrder @ react-dom.development.js:415
executeDispatchesAndRelease @ react-dom.development.js:3279
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3288
forEachAccumulated @ react-dom.development.js:3260
runEventsInBatch @ react-dom.development.js:3305
runExtractedPluginEventsInBatch @ react-dom.development.js:3515
handleTopLevel @ react-dom.development.js:3559
batchedEventUpdates$1 @ react-dom.development.js:21903
batchedEventUpdates @ react-dom.development.js:1061
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3569
attemptToDispatchEvent @ react-dom.development.js:4268
dispatchEvent @ react-dom.development.js:4190
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11062
discreteUpdates$1 @ react-dom.development.js:21919
discreteUpdates @ react-dom.development.js:1072
dispatchDiscreteEvent @ react-dom.development.js:4169

Solution -> Expose loadable-component's load method as well

[trinachoudhury1mg]

#42 - raised a PR for the issue

[abhinav2422]

@trinachoudhury1mg @TrinaChoudhury did you find any alternative? Or some workaround?