Issues with Remix + Vite + Prisma

[RobertGemmaJr]

I am currently migrating my Remix v2 app from the remix compiler over to Vite. I have finally gotten over most hurdles but I cannot seem to get Vite to play nice with Prisma. Note sure if this is better served hear or in the Prisma repository but I've done plenty of searching online to no avail.

I started with the Blues Stack template and ended up keeping Prisma as my ORM. Everything's been great until this migration where I get the following error all over my application:

Uncaught TypeError: Failed to resolve module specifier ".prisma/client/index-browser". Relative references must start with either "/", "./", or "../".

Has this actually been solved? I imagine it's a compiler issue but what little I have seen about the error online hasn't helped. Considering the Prisma dependency originated in the Remix template and the error has only shown up during the migration I feel as though someone may have gone through the same ordeal with Prisma. Any luck?

[gregleeper]

Here is how I import my PrismaClient:

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

Also, have a look at Kent's Epic Stack for references: https://github.com/epicweb-dev/epic-stack

[RobertGemmaJr]

The issue seems to be that we have a bunch of client extensions and I've yet to find examples online that also use them. I still import the types and enums like import { Trial } from "@prisma/client"; but on the server it's import { prisma } from "@db/server";

this is what my prisma extensions look like:

import { PrismaClient } from "@prisma/client";
import invariant from "tiny-invariant";

import { serverEnvironment } from "@environment/server";

import allExtension from "./extensions/all";
import fileExtension from "./extensions/file";
import individualExtension from "./extensions/individual";
import institutionExtension from "./extensions/institution";
import metadataFieldExtension from "./extensions/metadataField";
import studyExtension from "./extensions/study";
import trialExtension from "./extensions/trial";
import userExtension from "./extensions/user";
import userStudyRoleExtension from "./extensions/userStudyRole";

let PRISMA: ReturnType<typeof getClient>;

declare global {
  var __db__: ReturnType<typeof getClient>;
}

const { NODE_ENV, DATABASE_URL } = serverEnvironment();
invariant(typeof DATABASE_URL === "string", "DATABASE_URL env var not set");

// Connect to the prisma client
if (NODE_ENV === "production") {
  PRISMA = getClient();
} else {
  // Prevent creating additional connections on hot reload
  if (!global.__db__) global.__db__ = getClient();
  PRISMA = global.__db__;
}

function getClient() {
  const databaseUrl = new URL(DATABASE_URL);

  // Create the base client and add custom extensions
  const client = new PrismaClient({ datasources: { db: { url: databaseUrl.toString() } } })
    .$extends(allExtension)
    .$extends(fileExtension)
    .$extends(institutionExtension)
    .$extends(metadataFieldExtension)
    .$extends(individualExtension)
    .$extends(studyExtension)
    .$extends(trialExtension)
    .$extends(userExtension)
    .$extends(userStudyRoleExtension);

  // Connect eagerly to the database
  client.$connect();

  console.log(`🔌 PrismaClient set to ${databaseUrl.host}`);
  return client;
}

export { PRISMA as prisma };

[gregleeper]

What file is referencing the path in this error when importing?

Uncaught TypeError: Failed to resolve module specifier ".prisma/client/index-browser". Relative references must start with either "/", "./", or "../".

[RobertGemmaJr]

I am now getting it only in my Cypress tests - I'm 99% sure that's an indication of the error only occurring in Production. It doesn't really tell me which file is happening so it's hard to tell exactly where it's happening. My guess is it's in root.tsx, entry.server, or client.server because it's erroring before the first page actually loads

[gregleeper]

There may be a lot of good help in this link: prisma/prisma#12504 (comment)

In many of my projects I have to connect to multiple databases, so that means creating multiple prisma schemas. The fix for me with vite was something like this in the schema file:

// notice that the path to the output is specified  as @prisma-assets for this specific database
// you could use @prisma/client in the output value to place the generate command's output there as referenced in the conversation
// linked above
generator client {
    provider      = "prisma-client-js"
    output        = "../node_modules/@prisma-assets/client"
    binaryTargets = "debian-openssl-3.0.x"
}

[RobertGemmaJr]

FWIW here's what I ended up with:

generator client {
  output        = "../build/prisma/"
  provider      = "prisma-client-js"
  binaryTargets = ["native", "debian-openssl-3.0.x", "linux-musl-openssl-3.0.x"]
}

Remix builds the server and client code to separate subfolders so this just becomes a third one!