Next.js Discord

Discord Forum

Weird Client Component Errors

Answered
Arinji posted this in #help-forum
Open in Discord
ArinjiOP
import WidthWrapper from "@/components/wrappers/widthWrapper";

import Faq from "@/app/(products)/faq";
import Features from "@/app/(products)/features";
import { getMetadata } from "@/app/meta";
import { getJson } from "@/data/getJson";
import {
  faFileArrowUp,
} from "@fortawesome/free-solid-svg-icons";
import { LocationData } from "../../locations";
import Hero from "../enshrouded/hero";
import { DataContextProvider } from "./context";
import Plan from "./plan/plan";
export const metadata = getMetadata({ name: "Palworld" });

export type PlanData = {
  ram: number;
  slots: string;
  price: number;
  storage: number;
  monthly: boolean;
  recommended: boolean;
  id: number;
};
export type JsonData = {
  information: {
    description: string;
  };
  plans: PlanData[];
  locations: LocationData[];
  faq: {
    question: string;
    answer: string;
  }[];
};
export default async function Page() {
  const JsonData = (await getJson(
    "/productData/palworld",
    "palworld"
  )) as JsonData;

  return (
    <section className="w-full h-full flex flex-col items-center justify-start gap-10 xl:pt-4">
      <WidthWrapper color="#141820">
        <Hero description={JsonData.information.description} />
      </WidthWrapper>
      <WidthWrapper color="#141820">
        <DataContextProvider serverData={JsonData}>
          <Plan />
        </DataContextProvider>
      </WidthWrapper>
      <WidthWrapper color="#11141B">
        <Features
          featItems={[
            {
              title: "Backup Slots",
              subtitle:
                "Easily schedule secure file backups without requiring your online presence using our backup system.",
              icon: faFileArrowUp,
            },
          ]}
        />
      </WidthWrapper>
    </section>
  );
}

This is my page.tsx file, yet i keep getting errors that im exporting metadata from a component which is marked with "use client".. i dont get whats making my page a client component lol...
Answered by Arinji
Aight so the fix was to make a diff exports file and use that to import types, instead of your page.tsx leading to a weird server client recursive thing lmao
View full answer

29 Replies

Netherland Dwarf
Are there any component/libraries that can only be used in the client side?
In your importa
Imports
Sometimes this error happens if server comp is being imported in a client component
@Netherland Dwarf Sometimes this error happens if server comp is being imported in a client component
ArinjiOP
thing is, my page.tsx is meant to be a server component, so i dont get what component im importing could convert it into a client component
Netherland Dwarf
@Arinji Here is a little experiment
ArinjiOP
ok so one sec
i did some experimentation
Netherland Dwarf
Oh okay
ArinjiOP
looks like the <Plan /> component is causing the isuse
issue
"use client";
import { useRef, useState } from "react";
import { Checkout } from "./checkout";
import Location from "./location";
import Ram from "./ram";

export default function Plan() {
  const locationRef = useRef<HTMLDivElement>(null);
  const [pingLocations, setPingLocations] = useState(false);
  return (
    <div className="w-[95%] h-full flex flex-col xl:flex-row items-start justify-center pb-2 relative">
      <div className=" h-fit  w-full   flex flex-col items-start gap-10 justify-start">
        <Ram />
        <Location
          parentRef={locationRef}
          pingLocations={pingLocations}
          setPingLocations={setPingLocations}
        />
        <Checkout
          relative
          locationRef={locationRef}
          setPingLocations={setPingLocations}
        />
      </div>
      <Checkout locationRef={locationRef} setPingLocations={setPingLocations} />
    </div>
  );
}
so for some reason, importing a client component inside of a server component is causing the server component to become client
Netherland Dwarf
Its okay to import client into server, that shouldnt convert it
But you cant do vice versa
ArinjiOP
waiit one sec
are we not allowed to import stuff from a page.tsx by any chance?
Netherland Dwarf
You can import into page
ArinjiOP
wait, I GET IT
ok so remember how when you import a server component inside a client component
it becomes a client component
so in one of my other components which is a client component, i import a type from the page.tsx
making my page client
:lolsob:
Netherland Dwarf
Oh okay yeah you cant import server comp into client comp
ArinjiOP
im dumb as shit
yea lmao
idk why i spent an hour trying to troubleshoot
ArinjiOP
Aight so the fix was to make a diff exports file and use that to import types, instead of your page.tsx leading to a weird server client recursive thing lmao
Answer