klendi / react-top-loading-bar

A very simple, highly customisable youtube-like react loader component.
https://klendi.github.io/react-top-loading-bar/
MIT License
698 stars 60 forks source link

Call hook outside react context #44

Open fijemax opened 3 years ago

fijemax commented 3 years ago

Hello,

I used react-top-loading-bar in a simple way in a component library:

      <LoadingBar
        shadow={false}
        progress={missionsDownloadProgress}
        height={3}
        color='#00AAC2'
      />

So when I link the library to my application, I have a hook problem: image

I inspected hook in react-top-loading-bar code and didn't find anything ... but in the file index.modern.js from npmjs package I found this: image and it seems corrrspond to this code: image

To summaries: Object(__WEBPACK_IMPORTED_MODULE_0_react__["useRef"]) => checkIfFull

I deleted the index.modern.js" frile from the node_module packagereact-top-loading-barand webpack usedindex.jsfile instead, and seems work perfectly. But I don't know how to configure webpack to useindex.jsinstead ofindex.modern.jsand I don't know ifindex.modern.js``` is generated correctly.

klendi commented 3 years ago

Interesting, this never occurred to me before. Why don't you use onLoaderFinished(), to reset the progress. <LoadingBar color="#f11946" progress={progress} onLoaderFinished={() => setProgress(0)} /> Can you share more details on how can I reproduce this, react version, are you using next / cra / gatsby, etc. Also is it just a warning or does it crash ?

fijemax commented 3 years ago

I tryed with the onLoader FInished callback prop but I got the same problem. What i find weird that is seem normal that index.modern.js crash by seeing the code, no ? It's a crash, but it seem appear in a timeout callback (which would seem logical given the hook react context error), but we have many sentry about it.

fijemax commented 3 years ago

we are using "react": "^16.8.2"

khooz commented 3 years ago

@fijemax Is this still an issue? Can you please provide a self contained reproducible example?