"You're importing a component that needs useEffect" - ERROR

[SimonKhalaf]

Summary

Hi!
Im doing a Next.js project and i cant get past the first error which is:

---

./src\CountriesList.js
ReactServerComponentsError:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

Learn more: https://nextjs.org/docs/getting-started/react-essentials

╭─[C:\Users\simon\Downloads\Uppgift3\labb3\src\CountriesList.js:1:1]
1 │ import React, { useState, useEffect } from 'react';
· ─────────
2 │ import fetch from 'isomorphic-unfetch';
3 │
3 │ const CountriesList = () => {
╰────

Maybe one of these should be marked as a client entry with "use client":
./src\CountriesList.js
./src\app\page.js

---

Please help!

Additional information

My CountriesList.js code:

import React, { useState, useEffect } from 'react';
import fetch from 'isomorphic-unfetch';

const CountriesList = () => {
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    const fetchCountries = async () => {
      try {
        const response = await fetch('https://restcountries.com/v3.1/all');
        const data = await response.json();
        setCountries(data);
      } catch (error) {
        console.error('Error fetching countries data:', error);
      }
    };

    fetchCountries();
  }, []);

  return (
    <div>
      <h2>List of Countries</h2>
      <ul>
        {countries.map((country) => (
          <li key={country.cca2}>{country.name.common}</li>
        ))}
      </ul>
    </div>
  );
};

export default CountriesList;

--------------------------
The code for page.js:

import React from 'react';
import CountriesList from '@/CountriesList'; // Uppdatera sökvägen här

const Home = () => {
  return (
    <div>
      <h1>My Next.js App</h1>
      <CountriesList />
    </div>
  );
};

export default Home;

Example

No response

[ananuness]

CountriesList.{js | jsx} needs to be a client component as it uses functions that need the browser enviroment (useState, UseEffect and fetch). And there's no problem to import a client component in a server one!

I hope it helps!

[mohit2404]

hi there I'm facing a similar issue but the problem is that the solution is not working

same error: You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

// @/app/ui/dashboard/income-card.tsx

"use Client";

import { PencilSquareIcon, PlusIcon } from "@heroicons/react/16/solid";
import { useState } from "react";

export default async function IncomeCardWrapper() {
  const [addNewIncome, setAddNewIncome] = useState<boolean>(false);
  return (
    <>
      <div className="grid aspect-video w-full cursor-pointer place-items-center rounded-xl border-2 border-dark bg-dark/10 p-4
 tracking-wide text-dark">
        <div className="flex items-center gap-1.5">
          <PlusIcon className="h-6 w-6" />
          <p>Add New Income</p>
        </div>
      </div>

      <IncomeCard title="Income" />
      <IncomeCard title="Income" />
    </>
  );
}

export function IncomeCard({title}: {title: string}) {
  return <div title={title} />
}


// @/app/dashboard/income/page.tsx here I'm importing the above client component

import { addUserInCollection } from "@/app/lib/firebase/crud/create/incomeHandler";
import IncomeCardWrapper from "@/app/ui/dashboard/income-card";
import { lusitana } from "@/app/ui/fonts";
import { IncomeCardsSkeleton } from "@/app/ui/skeletons";
import { Suspense } from "react";

export default async function IncomePage() {
  // const res = await addUserInCollection("user", "[email protected]");
  // console.log(res);

  return (
    <section className="h-full">
      <h1 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
        Welcome to Income Page
      </h1>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Suspense fallback={<IncomeCardsSkeleton />}>
          <IncomeCardWrapper />
        </Suspense>
      </div>
    </section>
  );
}

it should not return the error as in the nextjs docs it is mentioned we can use client component in server component if the client component has the "use Client" directive at the top of the file, I'm using "use Client" still getting the error when importing it in IncomePage.tsx

using Next.js (14.2.3)

[ananuness]

Weird... This error should not occur as you code seems ok, but just a curious request, could you change the "use Client" for "use client"? I mean, idk if it causes any error, but if you already use it like that and didn't see any error, then okay!

[mohit2404]

well this worked, silly me the declaration must be in lowercase.
thanks

[ananuness]

Hehehe I didn't know for sure that it doesn't work if it's not lower case, lesson learned too! 🤣

[Yukti-J]

Try to write 'use client' at the top of your code. I found it in the next.js documentation. It worked for me.

[information-security]

To whom it may concern,

I forgot to add use client on top of my client component and I was confused by the error message. In the message it states mark the file (or its parent) with the "use client" directive. and falsely assuming I already have added use client on top of the file, I was thinking why should I add it on top of the parent server component that I was importing it from. So, as others have said, always check that you have added use client directive.