Search code examples
reactjsnext.jsshadcnui

Can not use shadcnui charts: TypeError: Super expression must either be null or a function

If I use a chart from shadcnui I get the following error: TypeError: Super expression must either be null or a function

enter image description here

import React from "react";

import { Bar, BarChart } from "recharts";

import { ChartConfig, ChartContainer } from "@/components/ui/chart";

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
  mobile: {
    label: "Mobile",
    color: "#60a5fa",
  },
} satisfies ChartConfig;

const MyChart = () => {
  const chartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 },
  ];
  return (
    <div>
      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
        <BarChart accessibilityLayer data={chartData}>
          <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
          <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
        </BarChart>
      </ChartContainer>
    </div>
  );
};

export default MyChart;

My page looks something like this:

import { auth, signOut } from "@/auth";
import { Button } from "@/components/ui/button";
import React from "react";

import { db } from "@/database/drizzle";
import { books, questionaire, users } from "@/database/schema";

import { desc, eq } from "drizzle-orm";

import { columns } from "./columns";
import { DataTable } from "@/components/ui/data-table";
import MyChart from "@/components/MyChart";

const Home = async () => {
  const session = await auth();

  console.log("user id: " + session?.user?.id);

  const userId = session?.user?.id;

  const orders = (await db
    .select({
      bookId: questionaire.bookId,
      status: questionaire.status,
      medikament: books.title,
      price: books.price,
    })
    .from(questionaire)
    .where(eq(questionaire.userId, userId ?? ""))
    .innerJoin(books, eq(questionaire.bookId, books.id))
    .limit(10)
    .orderBy(desc(questionaire.createdAt))) as QuestionaireTableClient[];

  return (
    <>
      <form
        action={async () => {
          "use server";
          await signOut();
        }}
        className="mb-10"
      >
        <Button className="text-white">Logout</Button>
      </form>

      <DataTable columns={columns} data={orders} />

      <MyChart />
    </>
  );
};

export default Home;

If I add the chart to some other page and define "use client" it does work. So I guess it something to do with server side rendering. But how can I prevent it? I need to load some data from the server first to populate the chart.

Solution

  • As stated by a GitHub user in this issue, you need to add use client to the top of the file.