Next.js Discord

Discord Forum

Adding a next.ui Table component gives error

Unanswered
American black bear posted this in #help-forum
Open in Discord
American black bearOP
./src/app/dashboard/page.tsx
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

   ,-[/home/projects/myproject/node_modules/@react-aria/i18n/dist/real-module.mjs:1:1]
 1 | import $iFADg$react, {useContext as $iFADg$useContext, useState as $iFADg$useState, useEffect as $iFADg$useEffect, useMemo as $iFADg$useMemo, useCallback as $iFADg$useCallback} from "react";
   :                                                                                     ^^^^^^^^^
 2 | import {useIsSSR as $iFADg$useIsSSR} from "@react-aria/ssr";
 3 | import {LocalizedStringDictionary as $iFADg$LocalizedStringDictionary, LocalizedStringFormatter as $iFADg$LocalizedStringFormatter} from "@internationalized/string";
 4 | import {DateFormatter as $iFADg$DateFormatter} from "@internationalized/date";
   `----

The error was caused by importing '@nextui-org/react/dist/index.mjs' in './src/app/dashboard/page.tsx'.

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


WORKING CODE:
import React from "react";
import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from "@nextui-org/react";

async function getData() {
    let data: any[] = [];
    console.table(data)

    return data
}

export default async function Dashboard() {
    const data = await getData();

    console.table(data);

    return (
        <h1>working</h1>
    )
}

4 Replies

American black bearOP
NOT WORKING:
import React from "react";
import { Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from "@nextui-org/react";

async function getData() {
    let data: any[] = [];
    console.table(data)

    return data
}

export default async function Dashboard() {
    const data = await getData();

    console.table(data);

    return (
        <h1>NOT WORKING</h1>
        <Table aria-label="Example static collection table">
            <TableHeader>
                <TableColumn>NAME</TableColumn>
                <TableColumn>ROLE</TableColumn>
                <TableColumn>STATUS</TableColumn>
            </TableHeader>
            <TableBody>
                <TableRow key="1">
                    <TableCell>Tony Reichert</TableCell>
                    <TableCell>CEO</TableCell>
                    <TableCell>Active</TableCell>
                </TableRow>
                <TableRow key="2">
                    <TableCell>Zoey Lang</TableCell>
                    <TableCell>Technical Lead</TableCell>
                    <TableCell>Paused</TableCell>
                </TableRow>
            </TableBody>
        </Table>
    )
}
American black bearOP
I added the 'use client' on top of my page and it solved, yes. I was on an old next.js version so this is all new for me. I have a lot of refactoring to make. Thank you!