CODEWITHSUNDEEP
reactjsstackblitz
Noble Polygon
Noble Polygon

Reputation: 806

React: Invalid hook call with Stackblitz

This is my first time using Stackblitz for an example project and I keep running into this error:

Error in /turbo_modules/[email protected]/cjs/react.development.js (1607:26)
Invalid hook call.

The project works fine locally and is able to compile without error on Stackblitz, however when I click a button the error occurs.

https://stackblitz.com/edit/react-ef9gan

In my import statements in the components from 'import react from 'react' to import React, { Component } from 'react'

I also removed the react-router-dom dependency from stackblitz since it's not needed for this project.

According to the documentation, there are three reasons this could occur:

There are three common reasons you might be seeing it:

1. You might have mismatching versions of React and React DOM.
2. You might be breaking the Rules of Hooks.
3. You might have more than one copy of React in the same app.

  1. Both my local project and the example are running 16.9.0 in both cases.

  2. I'm relatively new to react, so I'm not sure if I'm doing anything wrong here since it works locally.

  3. Looking at in dependencies, I don't see any duplicate files.

I looked at this SO question why material-UI textField returns 'Invalid hook call' error for a solution but it was to update the version of React so I'm not sure where to go from here to get this to compile correctly.

Upvotes: 1

Views: 564

Answers (1)

Damian Green
Damian Green

Reputation: 7495

Upgrading your react dependency fixes it.

https://stackblitz.com/edit/react-wk49k9?file=index.js

These issues occur more often on newer versions of react if 3rd party package authors don't specify react as a peer dependency. This can often cause multiple version of react to be installed the packages folder in node_modules triggering this error.

Upvotes: 3

Related Questions