react-top-loading-bar
react-top-loading-bar copied to clipboard
Call hook outside react context
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:
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:
and it seems corrrspond to this code:
To summaries:
Object(__WEBPACK_IMPORTED_MODULE_0_react__["useRef"])
=> checkIfFull
I deleted the index.modern.js" frile from the node_module package
react-top-loading-barand webpack used
index.jsfile instead, and seems work perfectly. But I don't know how to configure webpack to use
index.jsinstead of
index.modern.jsand I don't know if
index.modern.js``` is generated correctly.
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 ?
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.
we are using "react": "^16.8.2"
@fijemax Is this still an issue? Can you please provide a self contained reproducible example?