TypeError: Cannot read properties of undefined" when inserting data with Prisma in Next.js

Question

I'm trying to insert data into an "actualite" table using Prisma in my Next.js project. However, I'm encountering a "TypeError: Cannot read properties of undefined (reading 'actualite')" error when running the API.

Here's my API code:

// api/actualites.js

import { prisma } from '@prisma/client';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { titre, description } = req.body;

    try {
      const createdActualite = await prisma.actualite.create({
        data: {
          titre,
          description,
        },
      });

      res.status(200).json(createdActualite);
    } catch (error) {
      console.error(error);
      res.status(500).json({ error: 'An error occurred while publishing the news.' });
    }
  } else {
    res.status(405).json({ error: 'Method not allowed. Please use the POST method.' });
  }
}

I'm confident that the request is being sent correctly with the required parameters, but I'm not sure why I'm still getting this error.

I have verified that all Prisma dependencies are properly installed using the npm install @prisma/client prisma command, and I have also initialized Prisma correctly in my project.

// schema.prisma

datasource db {
  provider = "sqlite"
  url      = "file:./stable.db"
}

generator client {
  provider = "prisma-client-js"
}

model Actualite {
  id        Int     @id @default(autoincrement())
  titre     String
  contenu   String
  image     String 
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Answer 1

Have you updated your client package via

npx prisma generate

every time you change schema you should run that command in order to bring the latest changes from your prisma file to the client pacakge. Check out https://www.prisma.io/docs/reference/api-reference/command-reference#synopsis

Answer 2

First, this error is likely related to how you're importing the Prisma client instance, you need to first make a new instance client like this instead of import prisma directly:

     import { PrismaClient } from '@prisma/client';
    
     const prisma = new PrismaClient();
    
     export default async function handler(req, res) {
      // ... your code ...
     }

But this is not the best practice for instantiating PrismaClient with Next.js, since you will make multiple instances and this can result some error, is best to make a lib folder with a prisma.js file to make something like this and use this prisma instance instead, however this is in TypeScript since i use Prisma with TypeScript:

    import { PrismaClient } from '@prisma/client'
     
    const globalForPrisma = globalThis as unknown as {
    
      prisma: PrismaClient | undefined
    
    }
     
    export const prisma = globalForPrisma.prisma ?? new PrismaClient()
    
    if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

So you have to change it, this solution will instantiate a single instance PrismaClient and save it on the global object.

you can check more detail of the explanation in there documentation https://www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#problem