An invalid hook error occurred in my react app caused by react-router but I can't seem to detect where it's ing from. The full error reads as follows:
Error: Invalid hook call. Hooks can only be called inside of the body of a function ponent. 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 for tips about how to debug and fix this problem.
I don't have a mismatch of React versions nor is the error caused (can't say for sure but I don't) by any of the reasons stated. I followed the react-router docs here. I know I'm messing up something but I don't know where.
Below are the necessary ponents, starting from the entry file.
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import {
ApolloProvider,
ApolloClient,
createHttpLink,
InMemoryCache,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import {AUTH_TOKEN} from "./constants";
import App from "./ponents/App";
import "./styles/index.css";
const httpLink = createHttpLink({ uri: "http://localhost:4000" });
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem(AUTH_TOKEN);
return {
...headers,
authorization: token ? `Bearer ${token}` : "",
};
});
/*Instantiates Apollo client and connect to GraphQL server.
This will take the server link and an instantiation of the cache funtionality*/
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
ReactDOM.render(
<BrowserRouter>
<ApolloProvider client={client}>
<React.StrictMode>
<App />
</React.StrictMode>
</ApolloProvider>
</BrowserRouter>,
document.getElementById("root")
);
App.js
import React from "react";
import LinkList from "./LinkList";
import CreateLink from "./CreateLink";
import Header from "./Header";
import Login from './Login';
import { Routes, Route } from "react-router-dom";
import "../styles/App.css";
function App() {
return (
<div className="center w85">
<Header />
<div className="ph3 pv1 background-gray">
<Routes>
<Route path="/" element={<LinkList/>} />
<Route path="/create" element={<CreateLink/>} />
<Route path="/login" element={<Login/>} />
</Routes>
</div>
</div>
);
}
export default App;
Header.js
import React from "react";
import { useNavigate, Link } from "react-router-dom";
import { AUTH_TOKEN } from "../constants";
export default function Header() {
const history = useNavigate();
const authToken = localStorage.getItem(AUTH_TOKEN);
return (
<div className="flex pa1 justify-between nowrap orange">
<div className="flex flex-fixed black">
<div className="fw7 mr1">Hacker News</div>
<Link to="/" className="ml1 no-underline black">
new
</Link>
<div className="ml1">|</div>
<Link to="/top" className="ml1 no-underline black">
top
</Link>
<div className="ml1">|</div>
<Link to="/search" className="ml1 no-underline black">
search
</Link>
{authToken && (
<div className="flex">
<div className="ml1">|</div>
<Link to="/create" className="ml1 no-underline black">
submit
</Link>
</div>
)}
</div>
<div className="flex flex-fixed">
{authToken ? (
<div
className="ml1 pointer black"
onClick={() => {
localStorage.removeItem(AUTH_TOKEN);
history.push(`/`);
}}
>
logout
</div>
) : (
<Link to="/login" className="ml1 no-underline black">
login
</Link>
)}
</div>
</div>
);
}
LinkList.js
import React from "react";
import { useQuery, gql } from "@apollo/client";
import Link from "./Link";
const LinkList = () => {
const FEED_QUERY = gql`
{
feed {
id
links {
id
createdAt
url
description
}
}
}
`;
const { loading, error, data } = useQuery(FEED_QUERY);
if (loading) return <p style={{padding: 20, textAlign:"center"}}>Loading...</p>;
if (error) console.log(error);
return (
<div>
{data &&
data.feed.links.map((link) => <Link key={link.id} link={link} />)}
</div>
);
};
export default LinkList;
CreateLink.js
import React, { useState } from "react";
import { useMutation, gql } from "@apollo/client";
import { useNavigate } from "react-router-dom";
export default function CreateLink() {
const [formState, setFormState] = useState({ description: "", url: "" });
const history = useNavigate();
const CREATE_LINK_MUTATION = gql`
mutation PostMutation($url: String!, $description: String!) {
post(url: $url, description: $description) {
id
createdAt
url
description
}
}
`;
const [createLink] = useMutation(CREATE_LINK_MUTATION, {
variables: {
description: formState.description,
url: formState.url,
},
onCompleted: () => history.push("/")
});
return (
<div>
<form
onSubmit={(e) => {
e.preventDefault();
createLink();
}}
>
<div className="flex flex-column mt3">
<input
type="text"
className="mt2"
placeholder="A description for the link"
onChange={(e) =>
setFormState({
...formState,
description: e.target.value,
})
}
value={formState.description}
/>
<input
className="mb2"
value={formState.url}
onChange={(e) =>
setFormState({
...formState,
url: e.target.value,
})
}
type="text"
placeholder="The URL for the link"
/>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
}
Login.js
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { gql, useMutation } from "@apollo/client";
import { AUTH_TOKEN } from '../constants';
export default function Login() {
let history = useNavigate();
const [formState, setFormState] = useState({
login: true,
email: "",
password: "",
name: "",
});
const SIGNUP_MUTATION = gql`
mutation SignupMutation(
$email: string
$password: string
$name: string
) {
signup(email: $email, password: $password, name: $name) {
token
user {
name
email
}
}
}
`;
const [signup] = useMutation(SIGNUP_MUTATION, {
variables: {
email: formState.email,
password: formState.password,
name: formState.password,
},
onCompleted: ({ signup }) => {
localStorage.setItem(AUTH_TOKEN, signup.token);
history.push("/create");
},
});
const LOGIN_MUTATION = gql`
mutation LoginMutation($email: string, $password: string) {
login(email: $email, password: $password) {
token
}
}
`;
const [login] = useMutation(LOGIN_MUTATION, {
variables: {
email: formState.email,
password: formState.password,
},
onCompleted: ({ login }) => {
localStorage.setItem(AUTH_TOKEN, signup.token);
history.push("/");
},
});
return (
<div>
<h4 className="mv3">{formState.login ? "Login" : "Sign Up"}</h4>
<div className="flex flex-column">
{!formState.login && (
<input
value={formState.name}
onChange={(e) =>
setFormState({
...formState,
name: e.target.value,
})
}
type="text"
placeholder="Your name"
/>
)}
<input
value={formState.email}
onChange={(e) =>
setFormState({
...formState,
email: e.target.value,
})
}
type="text"
placeholder="Your email address"
/>
<input
value={formState.password}
onChange={(e) =>
setFormState({
...formState,
password: e.target.value,
})
}
type="password"
placeholder="Choose a safe password"
/>
</div>
<div className="flex mt3">
<button
className="pointer mr2 button"
onClick={() => (formState.login ? login : signup)}
>
{formState.login ? "login" : "create account"}
</button>
<button
className="pointer button"
onClick={(e) =>
setFormState({
...formState,
login: !formState.login,
})
}
>
{formState.login
? "need to create an account?"
: "already have an account?"}
</button>
</div>
</div>
);
}
Installed version of React according to packages in project:
[email protected] c:\projects\react-apollo-integration\frontend
+-- @apollo/[email protected]
| `-- [email protected] deduped
+-- @testing-library/[email protected]
| +-- [email protected] deduped
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected] deduped
`-- [email protected]
An invalid hook error occurred in my react app caused by react-router but I can't seem to detect where it's ing from. The full error reads as follows:
Error: Invalid hook call. Hooks can only be called inside of the body of a function ponent. 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/link/invalid-hook-call for tips about how to debug and fix this problem.
I don't have a mismatch of React versions nor is the error caused (can't say for sure but I don't) by any of the reasons stated. I followed the react-router docs here. I know I'm messing up something but I don't know where.
Below are the necessary ponents, starting from the entry file.
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import {
ApolloProvider,
ApolloClient,
createHttpLink,
InMemoryCache,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import {AUTH_TOKEN} from "./constants";
import App from "./ponents/App";
import "./styles/index.css";
const httpLink = createHttpLink({ uri: "http://localhost:4000" });
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem(AUTH_TOKEN);
return {
...headers,
authorization: token ? `Bearer ${token}` : "",
};
});
/*Instantiates Apollo client and connect to GraphQL server.
This will take the server link and an instantiation of the cache funtionality*/
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
ReactDOM.render(
<BrowserRouter>
<ApolloProvider client={client}>
<React.StrictMode>
<App />
</React.StrictMode>
</ApolloProvider>
</BrowserRouter>,
document.getElementById("root")
);
App.js
import React from "react";
import LinkList from "./LinkList";
import CreateLink from "./CreateLink";
import Header from "./Header";
import Login from './Login';
import { Routes, Route } from "react-router-dom";
import "../styles/App.css";
function App() {
return (
<div className="center w85">
<Header />
<div className="ph3 pv1 background-gray">
<Routes>
<Route path="/" element={<LinkList/>} />
<Route path="/create" element={<CreateLink/>} />
<Route path="/login" element={<Login/>} />
</Routes>
</div>
</div>
);
}
export default App;
Header.js
import React from "react";
import { useNavigate, Link } from "react-router-dom";
import { AUTH_TOKEN } from "../constants";
export default function Header() {
const history = useNavigate();
const authToken = localStorage.getItem(AUTH_TOKEN);
return (
<div className="flex pa1 justify-between nowrap orange">
<div className="flex flex-fixed black">
<div className="fw7 mr1">Hacker News</div>
<Link to="/" className="ml1 no-underline black">
new
</Link>
<div className="ml1">|</div>
<Link to="/top" className="ml1 no-underline black">
top
</Link>
<div className="ml1">|</div>
<Link to="/search" className="ml1 no-underline black">
search
</Link>
{authToken && (
<div className="flex">
<div className="ml1">|</div>
<Link to="/create" className="ml1 no-underline black">
submit
</Link>
</div>
)}
</div>
<div className="flex flex-fixed">
{authToken ? (
<div
className="ml1 pointer black"
onClick={() => {
localStorage.removeItem(AUTH_TOKEN);
history.push(`/`);
}}
>
logout
</div>
) : (
<Link to="/login" className="ml1 no-underline black">
login
</Link>
)}
</div>
</div>
);
}
LinkList.js
import React from "react";
import { useQuery, gql } from "@apollo/client";
import Link from "./Link";
const LinkList = () => {
const FEED_QUERY = gql`
{
feed {
id
links {
id
createdAt
url
description
}
}
}
`;
const { loading, error, data } = useQuery(FEED_QUERY);
if (loading) return <p style={{padding: 20, textAlign:"center"}}>Loading...</p>;
if (error) console.log(error);
return (
<div>
{data &&
data.feed.links.map((link) => <Link key={link.id} link={link} />)}
</div>
);
};
export default LinkList;
CreateLink.js
import React, { useState } from "react";
import { useMutation, gql } from "@apollo/client";
import { useNavigate } from "react-router-dom";
export default function CreateLink() {
const [formState, setFormState] = useState({ description: "", url: "" });
const history = useNavigate();
const CREATE_LINK_MUTATION = gql`
mutation PostMutation($url: String!, $description: String!) {
post(url: $url, description: $description) {
id
createdAt
url
description
}
}
`;
const [createLink] = useMutation(CREATE_LINK_MUTATION, {
variables: {
description: formState.description,
url: formState.url,
},
onCompleted: () => history.push("/")
});
return (
<div>
<form
onSubmit={(e) => {
e.preventDefault();
createLink();
}}
>
<div className="flex flex-column mt3">
<input
type="text"
className="mt2"
placeholder="A description for the link"
onChange={(e) =>
setFormState({
...formState,
description: e.target.value,
})
}
value={formState.description}
/>
<input
className="mb2"
value={formState.url}
onChange={(e) =>
setFormState({
...formState,
url: e.target.value,
})
}
type="text"
placeholder="The URL for the link"
/>
</div>
<button type="submit">Submit</button>
</form>
</div>
);
}
Login.js
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { gql, useMutation } from "@apollo/client";
import { AUTH_TOKEN } from '../constants';
export default function Login() {
let history = useNavigate();
const [formState, setFormState] = useState({
login: true,
email: "",
password: "",
name: "",
});
const SIGNUP_MUTATION = gql`
mutation SignupMutation(
$email: string
$password: string
$name: string
) {
signup(email: $email, password: $password, name: $name) {
token
user {
name
email
}
}
}
`;
const [signup] = useMutation(SIGNUP_MUTATION, {
variables: {
email: formState.email,
password: formState.password,
name: formState.password,
},
onCompleted: ({ signup }) => {
localStorage.setItem(AUTH_TOKEN, signup.token);
history.push("/create");
},
});
const LOGIN_MUTATION = gql`
mutation LoginMutation($email: string, $password: string) {
login(email: $email, password: $password) {
token
}
}
`;
const [login] = useMutation(LOGIN_MUTATION, {
variables: {
email: formState.email,
password: formState.password,
},
onCompleted: ({ login }) => {
localStorage.setItem(AUTH_TOKEN, signup.token);
history.push("/");
},
});
return (
<div>
<h4 className="mv3">{formState.login ? "Login" : "Sign Up"}</h4>
<div className="flex flex-column">
{!formState.login && (
<input
value={formState.name}
onChange={(e) =>
setFormState({
...formState,
name: e.target.value,
})
}
type="text"
placeholder="Your name"
/>
)}
<input
value={formState.email}
onChange={(e) =>
setFormState({
...formState,
email: e.target.value,
})
}
type="text"
placeholder="Your email address"
/>
<input
value={formState.password}
onChange={(e) =>
setFormState({
...formState,
password: e.target.value,
})
}
type="password"
placeholder="Choose a safe password"
/>
</div>
<div className="flex mt3">
<button
className="pointer mr2 button"
onClick={() => (formState.login ? login : signup)}
>
{formState.login ? "login" : "create account"}
</button>
<button
className="pointer button"
onClick={(e) =>
setFormState({
...formState,
login: !formState.login,
})
}
>
{formState.login
? "need to create an account?"
: "already have an account?"}
</button>
</div>
</div>
);
}
Installed version of React according to packages in project:
[email protected] c:\projects\react-apollo-integration\frontend
+-- @apollo/[email protected]
| `-- [email protected] deduped
+-- @testing-library/[email protected]
| +-- [email protected] deduped
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected] deduped
`-- [email protected]
- 2 Looks like you didn't include Header and Link ponents. Personally, I don't see any issues with hooks usage, except possible version mismatch. If the warning has a meaning stack trace, you can try following it – Max Commented Nov 19, 2021 at 18:14
-
@max I've added the
Headerponent. TheLinkponent is just a plain ponent with a property. Nothing interesting going on there. – Romeo Commented Nov 19, 2021 at 18:33 - 2 Okay, still nothing. On your place, I would try menting on parts of your app and running it until you get no error(kind of a binary search). Then you can narrow down where problem can be located – Max Commented Nov 19, 2021 at 18:39
- Have you tried to move your httpLink instance to inside your authLink function scope? Apparently it's the only possible hook called outside a function scope. – Erik Mazzelli Commented Nov 19, 2021 at 18:48
-
Is there any indication where in your code which hook is being blamed? Can you check the installed versions of
react,react-domandreact-router-dom? In your project directory runnpm list react react-dom react-router-dom. – Drew Reese Commented Nov 19, 2021 at 19:39
1 Answer
Reset to default 17I found out what I did wrong. I installed the react-router package outside the project's directory. My bad!