I have been banging my head against the desk since last night trying to figure out what is causing this warning in my AstroJS project. I am currently building an AstroJS project with React components and without making any significant changes my terminal started through these errors when I run it in dev:
Warning: 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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I have been working with React for a while now and I am pretty sure I know how to use Hooks in functional components but maybe I am just blind and missing something. I have also checked for mismatching versions of React and renderer by running npm ls react and I can see that the versions are matching up:
@example/minimal@0.0.1 /Users/austinspinazze/Desktop/Projects/Uncharted-Labs-V1
└─┬ @astrojs/react@1.0.0
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
└── react@18.2.0
So that does not seem to be the problem either. I am also pretty certain I do not have more than one copy of React in my Astro project but I am not sure how to check for this?
Below are the only two React components in the Astro project so far:
Navbar
import React, { useState } from 'react';
const Navbar = () => {
const [mobileMenu, setMobileMenu] = useState(false);
const menuToggle = () => {
mobileMenu ? setMobileMenu(false) : setMobileMenu(true);
console.log(mobileMenu);
};
return (
<nav className={[' w-full mx-auto bg-green-white']}>
<div className='flex items-center justify-between space-x-20 px-10'>
<div className='z-30 '>
<img
src='/assets/Uncharted_Labs_1.png'
alt=''
id='logo'
className='max-h-24'
/>
</div>
<div className='hidden items-center md:space-x-10 uppercase text-dark-green md:flex'>
<a
href='#'
className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
>
About
</a>
<a
href='#'
className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
>
Services
</a>
<a
href='#'
className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
>
Pricing
</a>
<a
href='#'
className='tracking-widest hover:border-b-2 hover:border-b-dark-green hover:mb-[-2px] ease-in-out duration-200'
>
Blog
</a>
<a
href='#'
className='px-8 py-2 border-2 border-dark-green rounded-lg shadow-md hover:text-green-white hover:bg-dark-green ease-in-out duration-200 font-bold'
>
Contact
</a>
</div>
{/* Hamburger Button */}
<button
onClick={menuToggle}
className='space-y-2 md:hidden cursor-pointer'
>
<span className='block h-0.5 w-8 animate-pulse bg-gray-600'></span>
<span className='block h-0.5 w-8 animate-pulse bg-gray-600'></span>
<span className='block h-0.5 w-8 animate-pulse bg-gray-600'></span>
</button>
</div>
{/* Mobile menu */}
{mobileMenu && (
<div
id='menu'
className='absolute p-6 md:hidden rounded-b-lg bg-green-white left-6 right-6 top-30 z-100'
>
<div className='flex flex-col items-center justify-center w-full space-y-6 font-bold text-dark-green rounded-sm'>
<a href='#' className='w-full text-center'>
About
</a>
<a href='#' className='w-full text-center'>
Services
</a>
<a href='#' className='w-full text-center'>
Pricing
</a>
<a
href='#'
className='w-full pt-6 border-t border-gray-400 text-center'
>
Blog
</a>
<a
href='#'
className='w-full py-3 text-center rounded-full bg-dark-green text-green-white font-bold'
>
Contact
</a>
</div>
</div>
)}
</nav>
);
};
export default Navbar;
Hero
import React from 'react';
import styles from './styles.module.css';
const Hero = () => {
return (
<div className='flex flex-col gap-8 justify-items-center items-center mx-auto xl:px-20 px-10 lg:grid lg:grid-cols-hero'>
<div id='hero-text' className='max-w-xl'>
<h5 className='text-dark-green-text text-base leading-8 font-epilogue tracking-wide my-8'>
UNCHARTED LABS
</h5>
<h1 className='text-green-white font-epilogue font-bold my-8 xl:text-7xl text-5xl'>
The Simple, Clean Design
</h1>
<p className='text-light-grey-text font-epilogue leading-8 my-8 opacity-[.67]'>
Agency provides a full service range including technical
skills, design, and business understanding.
</p>
<button className='bg-dark-green-text pt-4 pb-3 px-5 rounded-md font-epilogue text-light-grey-text drop-shadow-md mt-5 font-bold'>
START EXPLORING
</button>
</div>
<div id='hero-img' className='max-w-xl lg:max-w-3xl'>
<div className={`${styles.blob}`}>
<image src='/assets/Hero.png' className='max-w-[120%]' />
</div>
</div>
</div>
);
};
export default Hero;
Astro file that is importing and using the Navbar and Hero components
---
import Hero from "../components/Hero/index";
import "../styles/global.css";
import Navbar from "../components/Navbar/index";
---
<html lang="en" class="top-0">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Uncharted Labs</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Epilogue:wght@400;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="bg-dark-green">
<Navbar client:load />
<main class="flex justify-center mt-20">
<section
class="flex mt-10 sm:items-center w-full h-screen sm:mt-0 lg:h-[80vh]"
>
<Hero />
</section>
</main>
</body>
</html>
