CODEWITHSUNDEEP
reactjsnpmreact-hooks
user13418588
user13418588

Reputation: 21

I can't seem to be able to use hooks in react

I'm starting a new react app. So far, nothing weird has been added. This is how my package.json looks like:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "fibers": "^5.0.0",
    "jquery": "^3.5.0",
    "moment": "^2.24.0",
    "node-sass": "^4.14.0",
    "popper": "^1.0.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "^16.13.1",
    "react-moment": "^0.9.7",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "react-thunk": "^1.0.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "sass": "^1.26.5",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Then I try the most simple of react hooks call within a component:

import React, { useState } from 'react';

const Gallery = () => {
  const [test, setTest] = useState(null);
  return <div>Gallery</div>;
};

export default Gallery;

But when I try to run it, I get:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as 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 See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.

The package.json seems to be ok. No duplicate react versions. React is 16.8+. And the component is a functional component, not a class-based one. What could I be missing?

NOTE: When I try to run the "npm ls react" suggested in the documentation, I get no versions listed. react-dom appears correctly. Could this be the cause? And if so, any ideas of how to fix it?

Upvotes: 2

Views: 1574

Answers (1)

sadakchap
sadakchap

Reputation: 176

  • Problem, can be using different version of react & react-dom dependencies

  • If you are using react-router-dom and have Routes like this

      return (
    <Router>
      <Switch>
        <Route path="/" component={Home} exact /> 
        <Route path="/gallery" render={Gallery} exact />
      </Switch>
   </Router>
 );

Here, instead of <Route path="/gallery" render={Gallery} exact /> use this <Route path="/gallery" component={Gallery} />

That, solved my problem

Upvotes: 1

Related Questions