Next.js Discord

Discord Forum

Property does not exist on type help

Unanswered
Red Knot posted this in #help-forum
Open in Discord
Red KnotOP
Hello, i'm trying to access/render the properties of a model called garbageCollectionSchedules that is related to address, and address is related to user.
In this code i'm able to render it on the screen, but i get this error. How do i fix it?
Hello, i
Code:
<Card>
            <CardHeader>
                <p className="text-2xl font-semibold">{label}</p>
            </CardHeader>
            <Card className="col-span-4 md:col-span-3">
                <CardContent className="space-y-2">
                    {user?.addresses.map((address, index) => (
                        <Card className="col-span-4 md:col-span-3">
                            <div key={index} className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                                <div>
                                    <p>Establishment Name: {address.establishmentName}</p>
                                    <p>Street: {address.street}</p>
                                    <p>Neighborhood: {address.neighborhood}</p>
                                    <p>Number: {address.number}</p>
                                    <p>Other: {JSON.stringify(address.garbageCollectionSchedules)}</p>

                                </div>
                            </div>
                        </Card>
                    ))}
                </CardContent>
            </Card>
`

Even though i can see the property on prisma studio i get the following error:
Property 'garbageCollectionSchedules' does not exist on type '{ address_id: string; user_id: string; establishmentName: string; street: string; neighborhood: string; number: string; complement: string; coordinates: JsonValue; createdAt: Date; updatedAt: Date; }'.ts(2339)

51 Replies

Red KnotOP
I don't know if it helps, but this is my next-auth.d.ts:
import { UserRole } from "@prisma/client";
import NextAuth, { type DefaultSession } from "next-auth";
import { JWT } from "next-auth/jwt";
import { Address, FertilizerRequest } from "@prisma/client";

export type ExtendedUser = DefaultSession["user"] & {
    role: UserRole;
    isTwoFactorEnabled: boolean;
    isOAuth: boolean;
    firstTime: boolean;
    addresses: Address[];
    fertilizerRequest: FertilizerRequest[];
};

declare module "next-auth" {
    interface Session {
        user: ExtendedUser;
    }
}

declare module "next-auth/jwt" {
    interface JWT {
        role: UserRole;
        isTwoFactorEnabled: boolean;
        isOAuth: boolean;
        firstTime: boolean;
        addresses: Address[];
        fertilizerRequest: FertilizerRequest[];
    }
}
Netherland Dwarf
Its telling you the error
That the propety does not exist
Red KnotOP
But i'm able to see it on prisma studio
Netherland Dwarf
Okay but the object you sre accessing does not have that property
It might be how you are returning the prisma model
Red KnotOP
Oooh, i understand. Thank you. So i should probally check if that address has that property before trying to render it
right?
Netherland Dwarf
how are you returning the model
For that table in the pic
Red KnotOP
I have to be honest, i'm not a programmer, so i'm kind of learning on the go right now.
So i'm not sure, but i think i'm returning the model in my auth.ts like so:
import NextAuth from "next-auth";
import { PrismaAdapter } from "@auth/prisma-adapter";
import authConfig from "./auth.config";
import { db } from "./lib/db";
import { getUserById } from "@/data/user";
import { getTwoFactorConfirmationByUserId } from "./data/two-factor-confirmation";
import { getAccountByUserId } from "./data/account";

export const { handlers, signIn, signOut, auth } = NextAuth({
    pages: {
        signIn: "/auth/login",
        error: "/auth/error",
    },

    events: {
        async linkAccount({ user }) {
            await db.user.update({
                where: { id: user.id! },
                data: { emailVerified: new Date() },
            });
        },
    },

    callbacks: {
        async signIn({ user, account }) {
            if (account?.provider !== "credentials") return true;

            const existingUser = await getUserById(user.id!);

            if (!existingUser?.emailVerified) {
                return false;
            }

            if (existingUser.isTwoFactorEnabled) {
                const twoFactorConfirmation = await getTwoFactorConfirmationByUserId(
                    existingUser.id
                );

                if (!twoFactorConfirmation) return false;

                await db.twoFactorConfirmation.delete({
                    where: { id: twoFactorConfirmation.id },
                });
            }

            return true;
        },
        async session({ session, token }) {
            if (token.sub && session.user) {
                session.user.id = token.sub;
            }

            if (token.role && session.user) {
                session.user.role = token.role;
            }

            if (token.firstTime && session.user) {
                session.user.firstTime = token.firstTime;
            }

            if (session.user) {
                session.user.isTwoFactorEnabled = token.isTwoFactorEnabled;
            }

            if (session.user && token.email) {
                session.user.name = token.name;
                session.user.email = token.email;
            }

            if (session.user) {
                session.user.isOAuth = token.isOAuth;
            }

            if (token.addresses && session.user) {
                session.user.addresses = token.addresses;
            }

            if (token.fertilizerRequest && session.user) {
                session.user.fertilizerRequest = token.fertilizerRequest;
            }

            return session;
        },
        async jwt({ token }) {
            if (!token.sub) return token;

            const existingUser = await getUserById(token.sub);

            if (!existingUser) return token;

            const existingAccount = await getAccountByUserId(existingUser.id);

            token.isOAuth = !!existingAccount;

            token.name = existingUser.name;
            token.email = existingUser.email;
            token.role = existingUser.role;
            token.isTwoFactorEnabled = existingUser.isTwoFactorEnabled;
            token.firstTime = existingUser.firstTime;

            const addresses = await db.address.findMany({
                where: { user_id: existingUser.id },
                    include: {
                        garbageCollectionRequests: true,
                        garbageCollectionSchedules: true,
                        fertilizerStock: true,
                    }
            });
            token.addresses = addresses;

            const fertilizerRequest = await db.fertilizerRequest.findMany({
                where: { user_id: existingUser.id },
            });
            token.fertilizerRequest = fertilizerRequest;

            return token;
        },
    },
    adapter: PrismaAdapter(db),
    session: { strategy: "jwt" },
    ...authConfig,
});
Asiatic Lion
did you make any changes to the model?
i mean, did you do any migrations after generating your prisma client?
Red KnotOP
not recently
do you want to see my schema?
Asiatic Lion
your schema and the type from prisma/client that you are importing
Red KnotOP
ok 1 sec
Schema:
by type from prisma/client you mean my db.ts?
If so, this is it:

import { PrismaClient } from "@prisma/client";

declare global {
    var prisma: PrismaClient | undefined;
}

export const db = globalThis.prisma || new PrismaClient();

if (process.env.NODE_ENV !== "production") globalThis.prisma = db;
Asiatic Lion
nope, i mean the type as you are importing in the next-auth.d.ts
Red KnotOP
ok 1 sec
oops sorry
i'm not sure if this is what you mean:
you mean where i'm redirected if i ctrl click on this import right?: import { Address, FertilizerRequest } from "@prisma/client";
Asiatic Lion
ah probably nope, doesnt matter. did you try to generate client again?
Red KnotOP
let me try that
i can link you my code on github if that helps
Asiatic Lion
okay
Red KnotOP
1 sec, i'm going to commit some changes
Asiatic Lion
ofc
sorry for taking a while
Asiatic Lion
np
Red KnotOP
also, the code is very very messy
the page i was asking for help is in app/(protected)/settings
Asiatic Lion
isnt it only typescript issue?
i mean if you ignore that error in ide, does it work?
Red KnotOP
yes...
it shows on the screen
let me show you
i was just kind of worried because i didn't know if it was going tobreak the app at any moment
Asiatic Lion
maybe you should take a look at your schema in prisma, if the relations are okay, im not expert so idk really, but if you mind, you can do something like this in next-auth.d.ts

import { Address, FertilizerRequest, GarbageCollectionSchedule } from '@prisma/client';

export type ExtendedAddress = Address & {
garbageCollectionSchedules: GarbageCollectionSchedule[];
};

and use this type instead of Address[]
but it should fix your typescript error, ofc its not the best way, but its the best i can do for you now
sun is rising, time to get to the bed 😄
Red KnotOP
appreciate your patience and your time 🙏
you really helped me, thank you, good night to you
Asiatic Lion
make a TODO and check this thing later as you get your things done, np mate and good luck 🙂
Red KnotOP
thanksss