When reload happens i get Invalid hook call react error

165 views Asked by At

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

invalid hook calls error snapshot

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 -

dashboard component snapshot

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

1

There are 1 answers

0
shubham On BEST ANSWER

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 -

index.html

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

Now let's look at my webpack config -

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.