CODEWITHSUNDEEP
typescriptnext.jsprisma
Fellipe Marcel
Fellipe Marcel

Reputation: 1

I can't have autocomplete on types automatically generated by Prisma

I'm doing a project with Next and Prisma. In my schema.prisma, I have several models. For example, the one below:

model Barbershop {
  id       String    @id @default(uuid())
  name     String
  address  String
  imageUrl String
  bookings Booking[]
  services Service[]
}

It turns out that when trying to use the types automatically generated by Prisma, I don't have auto-completion of my models' attributes.

I've already tried restarting VS Code and also using the npx prisma generate command. Did not work.

I expected that, in the code below, I would have the Barbershop type autocomplete. For example, when using the barbershop prop, the .name should autocomplete, but this does not happen, although the code works.

import { Card, CardContent } from "@/app/_components/ui/card";
import { Barbershop } from "@prisma/client";

interface BarbershopItemProps {
  barbershop: Barbershop;
}

const BarbershopItem = ({ barbershop }: BarbershopItemProps) => {
  return (
    <Card>
      <CardContent className="p-0">{barbershop.name}</CardContent>
    </Card>
  );
};

export default BarbershopItem;

Another odd behaviour is that in my page.tsx I have the following code:

<div className="flex flex-wrap gap-4 px-5">
          {barbershops.map((barbershop) => (
            <BarbershopItem key={barbershop.id} barbershop={barbershop} />
          ))}
        </div>

I get an error saying:

Parameter 'barbershop' implicitly has an 'any' type

Edit: None of the types generated by the models have autocomplete. I tried on others and also got the same problem.

Upvotes: 0

Views: 463

Answers (1)

Luiz Madrid
Luiz Madrid

Reputation: 1

Well, as I'm taking the same course as you (thanks Felipe Rocha • tipsparadevs) I found the solution that worked for me.

▶︎ Go to your "tsconfig.json" file. Yours will probably have one like this:

"moduleResolution": "Bundler"

change "Bundler" to "node" like this:

"moduleResolution": "node"

And done i fixed it on mine. If you have any further questions, call us on discord: tuxiiez

Upvotes: 0

Related Questions