prisma - remix: TypeError: (0 , import_prisma.createNote) is not a function

Question

I created the following function in prisma client which I call from remix notes.tsx route,

export async function createNote(entity: { title: string, description: string }) {
    const note = await prisma.note.create({
        data: {
            title: entity.title,
            description: entity.description,
            userId: mainUser.id,
        },
    });
    console.log(note);
    return note;
}

Here is the the action in notes.tsx route which calls createNote,

export async function action(data: any) { const { request } = data; const formData = await request.formData(); console.log(formData, ...formData.entries());

const noteData: Note = {
    title: formData.get("title")?.toString() ?? "",
    description: formData.get("description")?.toString() ?? "",
};

const note = await createNote(noteData);
console.log(`New note created => Note:`, note);

}

What should happen is that a new record is created in the database. What I receive however is an error,

TypeError: (0 , import_prisma.createNote) is not a function
    at action (file:///Users/user/workspaces/ts/remix-workspace/project/app/routes/notes.tsx:27:24)

I pin pointed the issue. Any function exports from prisma client to remix are not working. I am defining the function correctly. For testing I created another function in prisma client and now see the same error in that the new function doesnt exist. How can this be fixed? thanks

Answer 1

Found out that we cannot directly use the prisma.client into a route in remix. Instead I had to create a db.server.ts which basically passes along a reference to database helper and that can be passed on to remix route. See below,

db.server.ts,

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

declare global {
    var __prisma: PrismaClient;
}

if (!global.__prisma) {
    global.__prisma = new PrismaClient();
}

global.__prisma.$connect();

export const prisma = global.__prisma;

Create your helper.ts whereever you prefer and add the following,

import { prisma } from "../db.server";
    
    export async function createNote(entity: any) {
    
        const note = await prisma.note.create({
          data: {
            title: entity.title,
            description: entity.description,
            userId: mainUser.id,
          },
        });
    }

You can now use this function in your route's action and it works.