G.A.S Posts - Answer Overflow

G.A.S

•Created by G.A.S on 11/4/2023 in #questions

Issue with 'use client' Directive and SSR in Next.js: Conflicting Errors and Resolution"

Hello, this code reproduces the error i'm facing

"use client";
import { useState } from "react";
import { api } from "~/trpc/server";

export default function Text() {
  const [isSignUp, setIsSignUp] = useState(false);

  const handleSignUp = async () => {
    try {
      const { name, email, password } = { name: "John Doe", email: "johndoe@example.com", password: "password123" };
      const signupReq = await api.user.signup.mutate({ name, email, password });
      console.log(signupReq);
    } catch (error) {
      console.error("Error occurred during sign up:", error);
    }
  };

  return (
    <main className="">
      <button onClick={handleSignUp}>Sign Up</button>
    </main>
  );
}

When I remove the 'use client' directive, I receive the following error: 'Maybe one of these should be marked as a client entry with "use client".' However, when I leave the 'use client' directive in place, I encounter the error: 'You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.' I'm unsure how to proceed in this situation. Any guidance on resolving this issue would be greatly appreciated.

21 replies

Gaming

Programming