When reload happens i get Invalid hook call react error

Question

At first app works just fine but as soon the page reload happens or any action that triggers the page reload this error comes.

Looking at the error stack it's saying that the error is coming from Redux Provider.

I have looked for all the possible mistakes that i have in my code. i.e - i checked all components and looked for if there any class component calling hooks and also ensured that hooks aren't getting nested or they were not called conditionally.

here is my Dashboard component -

As you can see i am dispatching two redux actions when component id firstly mounted and calling dispatching them again after every 5 minutes interval.

Also in which scenario i would get two copies of react or react-dom???

Answer 1

In my case the error is caused by incorrect combination of Webpack configuration and Starting file index.html.

I have this in my index.html -

focus on script tag in body. I've added the link to bundle.js

Now let's look at my webpack config -

The problem is webpack by default adds the script tag after compilation. And i also provided the same.... so i ended up having two copies of bundle.js hence i'am getting invalid hook calls error.

I removed my script tag from index.html and everything works as expected.