search

stratiformltd / react-loadable-visibility

A wrapper around react-loadable and @loadable/component to load elements once they are visible on the page.
BSD 3-Clause "New" or "Revised" License
1.01k stars 32 forks source link

LoadableVisibilityComponent doesn't expose loadable's load function. #40

Open trinachoudhury1mg opened 3 years ago

trinachoudhury1mg commented 3 years ago

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 commented 3 years ago

42 - raised a PR for the issue

abhinav2422 commented 2 years ago

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