Call hook outside react context

[fijemax]

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 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]

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]

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]

we are using "react": "^16.8.2"

[khooz]

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