Error: PrismaClient is unable to be run in the browser.

Unanswered

Ojos Azules posted this in #help-forum

Open in Discord

Ojos AzulesOP

2023-06-22T14:52:57.000Z

I use App Dir and when i import prisma client to display my posts from prisma i get this error

45 Replies

@Ojos Azules I use App Dir and when i import prisma client to display my posts from prisma i get this error

joulev

2023-06-22T14:54:09.000Z

did you use prisma in a client component? because you can't use it there

Ojos AzulesOP

2023-06-22T14:59:15.000Z

@joulev In component i use Images and useState, useRef, useEffect it means that i cant use prisma?

joulev

2023-06-22T14:59:22.000Z

correct

Ojos AzulesOP

2023-06-22T15:00:06.000Z

Wiat

i will remove them to check

joulev

2023-06-22T15:00:52.000Z

you can only use prisma in server components

so ensure the component does not have 'use client' and isn't imported to another client component

Ojos AzulesOP

2023-06-22T15:01:39.000Z

import prisma from "@/prisma/lib/prisma";

export async function getStaticProps() {
  const barbers = await prisma.barber.findMany();
  console.log(barbers);

  return {
    props: { barbers },
  };
}
const Team = () => {
  return (
    <section id="team" className="relative pt-14 page-observe">
      <div className="justify-center text-center">
        <h1 className="text-5xl font-medium mb-4 opacity-0">Our Barbers</h1>
        <p className="text-[rgba(86,86,86,0.8)] text-lg text-center md:pb-0 pb-8 opacity-0">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
          porttitor sem. Aliquam erat volutpat.
        </p>
      </div>
      <div className="grid lg:grid-cols-3 grid-cols-1 gap-4 justify-center 1xl:px-40 2xl:px-72 xl:px-10 sm:px-24 px-12 mt-16">
        <div className="grid justify-center w-full xl:w-[400px] opacity-0">
          <div className="relative">
            <div className="flex justify-center w-full absolute bottom-0 bg-[#b9873f] opacity-90">
              <div className="mb-[0.5px] hover:bg-black transition-colors duration-150 px-1"></div>
              <div className="mb-[0.5px] hover:bg-black transition-colors duration-150 px-1"></div>
              <div className="mb-[0.5px] hover:bg-black transition-colors duration-150 px-1"></div>
            </div>
          </div>
          <div className="p-6 text-center w-full">
            <h3 className="text-xl font-semibold"></h3>
            <p className="text-[#b9873f] italic font-normal">
              Hairdresser & Barber
            </p>
            <p className="text-gray-700 py-8 mx-auto border-t border-b mt-2">
              Show off your amazing employees, or highlight key members of your
              team. Tell the world who you are and why your team is the best.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Team;

This is my file but doesnt work again

@Ojos Azules import prisma from "@/prisma/lib/prisma"; export async function getStaticProps() { const barbers = await prisma.barber.findMany(); console.log(barbers); return { props: { barbers }, }; } const Team = () => { return ( <section id="team" className="relative pt-14 page-observe"> <div className="justify-center text-center"> <h1 className="text-5xl font-medium mb-4 opacity-0">Our Barbers</h1> <p className="text-[rgba(86,86,86,0.8)] text-lg text-center md:pb-0 pb-8 opacity-0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. </p> </div> <div className="grid lg:grid-cols-3 grid-cols-1 gap-4 justify-center 1xl:px-40 2xl:px-72 xl:px-10 sm:px-24 px-12 mt-16"> <div className="grid justify-center w-full xl:w-[400px] opacity-0"> <div className="relative"> <div className="flex justify-center w-full absolute bottom-0 bg-[#b9873f] opacity-90"> <div className="mb-[0.5px] hover:bg-black transition-colors duration-150 px-1"></div> <div className="mb-[0.5px] hover:bg-black transition-colors duration-150 px-1"></div> <div className="mb-[0.5px] hover:bg-black transition-colors duration-150 px-1"></div> </div> </div> <div className="p-6 text-center w-full"> <h3 className="text-xl font-semibold"></h3> <p className="text-[#b9873f] italic font-normal"> Hairdresser & Barber </p> <p className="text-gray-700 py-8 mx-auto border-t border-b mt-2"> Show off your amazing employees, or highlight key members of your team. Tell the world who you are and why your team is the best. </p> </div> </div> </div> </section> ); }; export default Team; This is my file but doesnt work again

joulev

2023-06-22T15:02:24.000Z

in the app directory you don't have getstaticprops

Ojos AzulesOP

2023-06-22T15:02:50.000Z

So what i have to do?

joulev

2023-06-22T15:03:18.000Z

use server components

import prisma from "@/prisma/lib/prisma";

export default async function Team() {
  const barbers = await prisma.barber.findMany();
  console.log(barbers);
  return (
    <section id="team" className="relative pt-14 page-observe">
      <div className="justify-center text-center">
        <h1 className="text-5xl font-medium mb-4 opacity-0">Our Barbers</h1>
        <p className="text-[rgba(86,86,86,0.8)] text-lg text-center md:pb-0 pb-8 opacity-0">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
          porttitor sem. Aliquam erat volutpat.
        </p>
      </div>
      <div className="grid lg:grid-cols-3 grid-cols-1 gap-4 justify-center 1xl:px-40 2xl:px-72 xl:px-10 sm:px-24 px-12 mt-16">
        <div className="grid justify-center w-full xl:w-[400px] opacity-0">
          <div className="relative">
            <div className="flex justify-center w-full absolute bottom-0 bg-[#b9873f] opacity-90">
              <div className="mb-[0.5px] hover:bg-black transition-colors duration-150 px-1"></div>
              <div className="mb-[0.5px] hover:bg-black transition-colors duration-150 px-1"></div>
              <div className="mb-[0.5px] hover:bg-black transition-colors duration-150 px-1"></div>
            </div>
          </div>
          <div className="p-6 text-center w-full">
            <h3 className="text-xl font-semibold"></h3>
            <p className="text-[#b9873f] italic font-normal">
              Hairdresser & Barber
            </p>
            <p className="text-gray-700 py-8 mx-auto border-t border-b mt-2">
              Show off your amazing employees, or highlight key members of your
              team. Tell the world who you are and why your team is the best.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

assuming this Team function is not imported to a client component

Ojos AzulesOP

2023-06-22T15:10:58.000Z

The problem is that i need the useEffect etc.

Is there any other way?

maxswjeon

2023-06-22T15:13:35.000Z

Seperate a section that needs a useEffect, and create a seperate client component

Ojos AzulesOP

2023-06-22T15:15:21.000Z

You have right

Thank you

yes but again i have to import to client component

This is my component that i want to fetch prisma data

import prisma from "@/prisma/lib/prisma";

export default async function BarberCard() {
  const barbers = await prisma.barber.findMany();
  console.log(barbers);
  return (
    <div className="p-6 text-center w-full">
      <h3 className="text-xl font-semibold">Barber 1</h3>
      <p className="text-[#b9873f] italic font-normal">Hairdresser & Barber</p>
      <p className="text-gray-700 py-8 mx-auto border-t border-b mt-2">
        Show off your amazing employees, or highlight key members of your team.
        Tell the world who you are and why your team is the best.
      </p>
    </div>
  );
}

But this component it has to be imported to team.tsx component which is client component

maxswjeon

2023-06-22T15:20:41.000Z

The barbers should be fetched on the Server Component, and the data should be passed with Props.

Ojos AzulesOP

2023-06-22T15:21:08.000Z

so i dont import the component but i fetch?

maxswjeon

2023-06-22T15:22:30.000Z

Sorry, I didn't understand your last chat. Please provide me with examples

Ojos AzulesOP

2023-06-22T15:26:31.000Z

This is my BarberCard.tsx

// BarberCard.tsx
import React from "react";

interface Barber {
  name: string;
  title: string;
  description: string;
}

interface BarberCardProps {
  barbers: Barber[];
}

const BarberCard: React.FC<BarberCardProps> = ({ barbers }) => {
  return (
    <>
      {barbers.map((barber, index) => (
        <div key={index} className="p-6 text-center w-full">
          <h3 className="text-xl font-semibold">{barber.name}</h3>
          <p className="text-[#b9873f] italic font-normal">
            Hairdresser & Barber
          </p>
          <p className="text-gray-700 py-8 mx-auto border-t border-b mt-2">
            Show off your amazing employees, or highlight key members of your
            team. Tell the world who you are and why your team is the best.
          </p>
        </div>
      ))}
    </>
  );
};

export default BarberCard;

And this is my Team.tsx

You mean something like this?

@Ojos Azules And this is my Team.tsx

maxswjeon

2023-06-22T15:29:30.000Z

This should be Client component, so put "use client" top of the page.

Ojos AzulesOP

2023-06-22T15:33:17.000Z

I import this BarberCard

// BarberCard.tsx
import prisma from "@/prisma/lib/prisma";

export default async function BarberCard() {
  const barbers = await prisma.barber.findMany();
  console.log(barbers);

  return (
    <>
      {barbers.map((barber, index) => (
        <div key={index} className="p-6 text-center w-full">
          <h3 className="text-xl font-semibold">{barber.name}</h3>
          <p className="text-[#b9873f] italic font-normal">
            Hairdresser & Barber
          </p>
          <p className="text-gray-700 py-8 mx-auto border-t border-b mt-2">
            Show off your amazing employees, or highlight key members of your
            team. Tell the world who you are and why your team is the best.
          </p>
        </div>
      ))}
    </>
  );
}

To team.tsx and i get those errors 'BarberCard' cannot be used as a JSX component.
Its return type 'Promise<Element>' is not a valid JSX element.
Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key Type '{ barbers: { name: string; }[]; }' is not assignable to type 'IntrinsicAttributes'.
Property 'barbers' does not exist on type 'IntrinsicAttributes'.

maxswjeon

2023-06-22T15:40:47.000Z

Can you check Next.js version? I cannot reproduce your problem

Ojos AzulesOP

2023-06-22T15:43:13.000Z

13.4.2

maxswjeon

2023-06-22T15:44:18.000Z

Next.js has been released to 13.4.7. Can you update first?

And To use an async Server Component with TypeScript, ensure you are using TypeScript 5.1.3 or higher and @types/react 18.2.8 or higher. it is from official next documentation

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#async-and-await-in-server-components\

Ojos AzulesOP

2023-06-22T15:49:21.000Z

i updated next 13.4.7

i also tried to update ts and react but doesnt updated for some reason

Ojos AzulesOP

2023-06-22T16:05:34.000Z

import prisma from "@/prisma/lib/prisma";

export default function BarberCard({ barbers }) {
  return (
    <>
      {barbers.map((barber, index) => (
        <div key={index} className="p-6 text-center w-full">
          <h3 className="text-xl font-semibold">{barber.name}</h3>
          <p className="text-[#b9873f] italic font-normal">
            Hairdresser & Barber
          </p>
          <p className="text-gray-700 py-8 mx-auto border-t border-b mt-2">
            Show off your amazing employees, or highlight key members of your
            team. Tell the world who you are and why your team is the best.
          </p>
        </div>
      ))}
    </>
  );
}

export async function getStaticProps() {
  const barbers = await getBarbers();

  return {
    props: {
      barbers,
    },
  };
}

async function getBarbers() {
  const barbers = await prisma.barber.findMany();
  return barbers;
}

This is my last commit

And i have this error now

maxswjeon

2023-06-22T16:07:05.000Z

If you are using app dir, getStaticProps will not work

Ojos AzulesOP

2023-06-22T16:08:49.000Z

oh yes i forgot that...

'BarberCard' cannot be used as a JSX component.
  Its return type 'Promise<Element>' is not a valid JSX element.
    Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

i get this error thats why i did it with getstaticprops

maxswjeon

2023-06-22T16:11:03.000Z

It's really hard to follow up your problem only with snippets (sorry...) It would be much helpful if you can provide us full project