I would like someone to help me with this error in React.
Error: invalid hook call. Hooks can only be called within the body of a function component. This could happen for one of the following reasons:
- You might have mismatched versions of React and the renderer (like React DOM)
- You may be breaking the Hooks rules
- You may have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips on how to debug and fix this issue.
More details of the error:
▼ 30 stack frames were expanded.
resolveDispatcher
C: /Users/Caleb99/node_modules/react/cjs/react.development.js: 1476
useContext
C: /Users/Caleb99/node_modules/react/cjs/react.development.js: 1484
useParams
C: / Users / Caleb99 / Documents / proyectos react / modules / hooks.js: 40
MovieDetails
C: / Users / Caleb99 / Documents / proyectos react / virgen / src / pages / MovieDetails.jsx: 7
renderWithHooks
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 14985
mountIndeterminateComponent
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 17811
beginWork
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 19049
HTMLUnknownElement.callCallback
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 3945
invokeGuardedCallbackDev
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 3994
invokeGuardedCallback
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 4056
beginWork $ 1
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 23964
performUnitOfWork
C: / Users / Caleb99 / Documents / proyectos react / virgen / node_modules / react-dom / cjs / react-dom.development.js: 22776
I have read a lot about hooks but I still can't identify the error. The line that shows error is this:
import React from "react";
import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { get } from "../utils/httpClient";
import styles from "./MovieDetails.module.css";
export function MovieDetails() {
const { movieId } = useParams(); //----> aqui se explota la app por este hooks importado
const [movie, setMovie] = useState(null);
useEffect(() => {
get("/movie/" + movieId).then((data) => {
setMovie(data);
});
}, [movieId]);
if (!movie) {
return null;
}
const imageUrl = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
return (
<div className={styles.detailsContainer}>
<img
className={`${styles.col} ${styles.movieImage}`}
src={imageUrl}
alt={movie.title}
/>
<div className={`${styles.col} ${styles.movieDetails}`}>
<p className={styles.firstItem}>
<strong>Title:</strong> {movie.title}
</p>
<p>
<strong>Genres:</strong>{" "}
{movie.genres.map((genre) => genre.name).join(", ")}
</p>
<p>
<strong>Description:</strong> {movie.overview}
</p>
</div>
</div>
);
}
Here I call the component:
import React from "react";
import styles from "./App.module.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { MovieDetails } from "./pages/MovieDetails";
import { LandingPage } from "./pages/LandingPage";
export function App() {
return (
<Router>
<header>
<Link to="/">
<h1 className={styles.title}>Movies</h1>
</Link>
</header>
<main>
<Switch>
<Route exact path="/movies/:movieId">
<MovieDetails />
</Route>
<Route path="/">
<LandingPage />
</Route>
</Switch>
</main>
</Router>
);
}
React details: npm ls react
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected] deduped
`-- [email protected]
+-- [email protected]
| +-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected] deduped
`-- [email protected] deduped
I am new to react, I would appreciate the help.
In order for React to recognize that a functional component is being defined, it must be imported
react
(the default export) at the beginning of the file. If not, then when transpiling it interprets the file as a function and not a React component.Add it when doing the imports:
Friends I finally found the solution to my problem!!!
I share it to help another rookie who may have the same thing happen to him and save two days of mess and research lol.
The error was due to React apparently not finding the react-router-dom package, even though it was installed (I installed and uninstalled it many times trying to solve the mess). I solved it by doing a
cd
inside the folder where the project is located and after that annpm i
ornpm install
(it's the same) and thennpm start
. ready problem solved!!!It is necessary to check that all the dependencies are in the package.json of the project before executing the command
npm i
.This problem can occur especially when you transfer a project from one PC to another.
Ready friends, God bless everyone who tried to help me. Many blessings to all!!!