"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", "admin@gmail.com");
  // 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.

[tonyromerohuerta]

import React, { useEffect, useState } from 'react'; import { Card, CardContent } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Table, TableHead, TableRow, TableCell, TableBody } from '@/components/ui/table';

const generateToken = (i, timestamp = Date.now()) => ({ name: Token_${timestamp}_${i + 1}, totalSupply: '16,000,000,000,000', owned: '15,000,000,000,000', public: '1,000,000,000,000', mineable: i === 0 ? '✅' : '❌', status: '🟢 Active', networks: ['Ethereum', 'BNB', 'Polygon'] });

const initialTokens = Array.from({ length: 1000 }, (_, i) => generateToken(i));

export default function SovereignDashboard() { const [tokens, setTokens] = useState(initialTokens); const [search, setSearch] = useState('');

useEffect(() => { const interval = setInterval(() => { const newBatch = Array.from({ length: 100000 }, (_, i) => generateToken(i)); setTokens(prev => [...newBatch.slice(0, 1000), ...prev.slice(0, 1000)]); }, 86400000); // 24-hour update

return () => clearInterval(interval);

}, []);

const filteredTokens = tokens.filter(token => token.name.toLowerCase().includes(search.toLowerCase()) );

return (

Sovereign Token Control Dashboard

<Input placeholder="Search Tokens..." value={search} onChange={(e) => setSearch(e.target.value)} className="mb-4" /> Name Total Supply Owned Public Mineable Networks Status {filteredTokens.slice(0, 100).map((token, idx) => ( {token.name} {token.totalSupply} {token.owned} {token.public} {token.mineable} {token.networks.join(', ')} {token.status} ))}

<Button onClick={() => alert('100,000 token batch deployment triggered.')}>Trigger New Batch

); }