User questions: ESM prototype trial

[millsp]

Hi, you have been directed to this issue because we want your feedback. Thanks to your answers, we will be able to better take design decisions in the future.

We'd appreciate if you could take 5 minutes to answer a few questions for us. You can write your reply directly in this issue as a comment. Copy paste these questions in your answer, leave the answer blank if you don't know.

When you switched to our ESM version, did everything work as expected?

Did you encounter anything unexpected? If so, please let us know how that happened.

What changes did you need to make in order to switch to our ESM version?

How smooth was the upgrade, and did everything work just as before?

Which package manager are you using?

For instance npm, pnpm, or yarn. Please attach the version if you know it.

Is a bundler in use? If yes, which one?

Are you using webpack, swc, esbuild, rollup, or any other bundler?

Is a framework in use? If yes, which one?

Are you using Next.js, Next, or any other framework?

Your project uses TypeScript or just JavaScript?

Do you prefer using TypeScript or JavaScript within your project, or both?

Anything worth mentioning?

This is very much a free form answer, for anything you think is important or useful to us.

[gtim]

When you switched to our ESM version, did everything work as expected?
Yes.

What changes did you need to make in order to switch to our ESM version?
No changes, except for installing prisma@4.15.0-integration-feat-client-esm.27 and @prisma/client@4.15.0-integration-feat-client-esm.27. It was all very smooth.

Which package manager are you using?
npm 9.2.0

Is a bundler in use? If yes, which one?
vite 4.3.9

Is a framework in use? If yes, which one?
sveltekit 1.20.0

Your project uses TypeScript or just JavaScript?
TypeScript, JSDoc

Anything worth mentioning?
As I encountered #14484/#15614, this branch was greatly appreciated. Thank you!

[sjc5]

When you switched to our ESM version, did everything work as expected?
Yes.

Did you encounter anything unexpected? If so, please let us know how that happened.
No.

What changes did you need to make in order to switch to our ESM version?
Nothing.

How smooth was the upgrade, and did everything work just as before?
Very. Yes.

Which package manager are you using?
pnpm

Is a bundler in use? If yes, which one?
Yes. Vite.

Is a framework in use? If yes, which one?
solid-start

Your project uses TypeScript or just JavaScript?
TypeScript of course.

Anything worth mentioning?
No. Thanks for doing this.

[andyjy]

When you switched to our ESM version, did everything work as expected?
~Almost - I hit some [TypeError]: Cannot read properties of undefined errors that were relatively straightforward to resolve:

What changes did you need to make in order to switch to our ESM version?

Both technically breaking changes vs. the current CJS release, but edits I debatably should have made anyhow:

1. I was importing Enum const values in a couple places via import Prisma from "@prisma/client"; const example = Prisma.MyEnum.value; - the ESM build no longer exposes these as properties of the default export (even though the type definitions still pass typechecking as having them present). Fixed by rewriting to use named imports (better practice for ESM anyhow).

2. I hit a separate error where import { Prisma } from "@prisma/client"; Prisma.defineExtension(...) fatal'd due to Prisma being undefined - diagnosed to having circular ESM imports between two of my app code files resulting in some code executing before the import of Prisma. Resolved by refactoring to remove my circular imports.

Which package manager are you using?
npm 9.5.1

Is a bundler in use? If yes, which one?
(via NextJS): swc and turbopack (separately, different services)

Is a framework in use? If yes, which one?
NextJS 13.4.4

Your project uses TypeScript or just JavaScript?
Typescript

Anything worth mentioning?
~

[gaarf]

When you switched to our ESM version, did everything work as expected?
without ESM version, app works fine locally but fails once built / deployed to fly.io
with ESM version, getting past CJS issues, but now getting a fresh new error after Dockerized:

2023-06-12T21:21:21Z app[178115d2a94578] sea [info]prisma:warn Your generated Prisma Client could not immediately find its `schema.prisma`, falling back to finding it via the current working directory.
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]prisma:warn We are interested in learning about your project setup. We'd appreciate if you could take the time to share some information with us.
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]prisma:warn Please help us by answering a few questions: https://pris.ly/bundler-investigation
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]PrismaClientInitializationError: Prisma Client could not find its `schema.prisma`. This is likely caused by a bundling step, which leads to `schema.prisma` not being copied near the resulting bundle. We would appreciate if you could take the time to share some information with us.
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]Please help us by answering a few questions: https://pris.ly/bundler-investigation-error
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]    at new Er (file:///app/build/server/chunks/6-a3ba3058.js:136:118)
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]    at t.getEngine (file:///app/build/server/chunks/6-a3ba3058.js:206:6055)
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]    at new t (file:///app/build/server/chunks/6-a3ba3058.js:206:5635)
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]    at file:///app/build/server/chunks/6-a3ba3058.js:374:16
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]    at ModuleJob.run (node:internal/modules/esm/module_job:194:25) {
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]  clientVersion: '4.15.0-integration-feat-client-esm.27',
2023-06-12T21:21:21Z app[178115d2a94578] sea [info]  errorCode: undefined

What changes did you need to make in order to switch to our ESM version?
bumped the dependency version and ignored the warning:

Use of eval in "node_modules/.pnpm/@prisma+client@4.15.0-integration-feat-client-esm.27_prisma@4.15.0-integration-feat-client-esm.27/node_modules/@prisma/client/runtime/library.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.

Which package manager are you using?
pnpm@8.6.1

Is a bundler in use? If yes, which one?
vite@4.3.9

Is a framework in use? If yes, which one?
@sveltejs/kit@1.20.2

Your project uses TypeScript or just JavaScript?
typescript@5.1.3

Anything worth mentioning?
will update with any further findings

[millsp]

Cool, that is also expected. The client always needs a schema and an engine near it. Because it is bundled, the client is moved to chunks, but schema and engine are missing. So the solution here is to also copy the engine there. I understand that it may be complicated, so feel free to leave your feedback at https://pris.ly/engine-not-found-bundler-investigation too. We will learn from that to improve things in the future.

[gaarf]

I got it working with the following in Dockerfile:

COPY --from=build /app/prisma/schema.prisma /app/build/server/chunks/schema.prisma
COPY --from=build /app/node_modules/prisma /tmp/prisma-engines

🥳

[millsp]

Nice, well done 🥳

[millsp]

So ESM worked for you?

[gaarf]

yes, it's working after I copy over the engine and schema.

[ArnaudBarre]

I still have issues with trying to load the bundle generated code with esbuild (TS project) into node ESM. I'm using a raw node server.

I was expecting the generated runtime to be ESM, but it still contains } = require('./runtime/library').

A few manual replacement was enough to make index.js a real ESM module, but the library code this is a bit trycky as this is compile and have a lot of esbuild wrappers.

I think shipping both a cjs and esm runtime is an ok cost (1 MB, 2% of my node_modules/@prisma on mac Intel) and generating an ESM entrypoint seems like 5 to 10 changes in the code generation.

[millsp]

You should have .mjs files present when you install and generated with the special version, with no trace of require left. Do you have a link to your setup, or could share a reproduction?

[ArnaudBarre]

Probably mess up in the installation. I have now a proper .mjs file, but on which esbuild now warns because library.mjs contains eval("__dirname")

You can read more about direct eval and bundling here: https://esbuild.github.io/link/direct-eval

[hendrysadrak]

@ArnaudBarre you can find a workaround here #19564 (reply in thread)

[ArnaudBarre]

Thanks but I don't get this hack, you can get a real dirname in esm with:

import { dirname } from 'path'
import { fileURLToPath } from 'url'
const dir = dirname(fileURLToPath(import.meta.url))

Taken from: https://antfu.me/posts/isomorphic-dirname

[zimonitrome]

When you switched to our ESM version, did everything work as expected?
No

I get the following error during npm start (solid-start start):

Listening on port 3000
undefined:1
__dirname
^

ReferenceError: __dirname is not defined
    at eval (eval at Rp (file:///G:/myapp/dist/server.js:23520:912), <anonymous>:1:1)
    at Rp (file:///G:/myapp/dist/server.js:23520:912)
    at async ca (file:///G:/myapp/dist/server.js:23520:334)
    at async yn.loadLibrary (file:///G:/myapp/dist/server.js:23566:570)
    at async Er.loadEngine (file:///G:/myapp/dist/server.js:23568:538)
    at async Er.instantiateLibrary (file:///G:/myapp/dist/server.js:23567:1842)

What changes did you need to make in order to switch to our ESM version?
Still haven't gotten it to work :(

I did:

npm install prisma@4.15.0-integration-feat-client-esm.27 @prisma/client@4.15.0-integration-feat-client-esm.27

Which package manager are you using?
npm@8.5.4

Is a bundler in use? If yes, which one?
vite@4.1.4

Is a framework in use? If yes, which one?
SolidJS + AuthJS

solid-js@1.7.2
solid-start@0.2.26
next-auth@4.19.2
@solid-auth/base@2.0.3

Your project uses TypeScript or just JavaScript?
TypeScript

Anything worth mentioning?
Works well running dev but not building.

[zimonitrome]

@hendrysadrak and @henrycrib thanks for upvoting, are you experiencing the same problem?

I tried to use the fix from another thread but could not get it to work either: #5030 (comment)

Did you try that?

[hendrysadrak]

I did hit the same issue with a bit different setup. For bundling, I use esbuild through tsup (think wrapper on top of esbuild).

I took the time to trace where the issue comes from. I didn't have that issue with any of the other packages I use (big fan of packages, so using a lot of 'em)

tsup provides a compatibility layer for using CJS features in ESM. Think of __dirname, __filename, require(). That compact layer uses esbuild's inject feature. Inject allows you to replace definitions of globals.

This compact layer works for other packages but not for Prisma. What the heck, right? ReferenceError: __dirname is not defined. All-in-all, this version 4.15.0-integration-feat-client-esm.27 should be full ESM, no CJS anyway. But I was still getting that error, and that had to come from the prisma package (lots of debugging...).

I ended up finding this line in the prisma client source. Ahaaa! Ofc. an eval. The global __dirname isn't set (because ESM), esbuild does not handle injecting definitions inside eval, and we get the error at runtime.

---

The workaround I used is done with esbuild-plugin-replace

plugins: [ // this is esbuild's configuration https://esbuild.github.io/plugins/#using-plugins
	replace({
		values: {
			[`eval('__dirname')`]: '__dirname',
		},
		delimiters: ['', ''],
	}),
]

Replacing the eval('__dirname') in the prisma package code with __dirname.

---

I hope this is helpful and that in the future release, the Prisma team makes the most sensible call to get rid of that horrid eval.

[janpio]

@henrycrib replied out of thread: #19564 (comment)

Yes, I was able to fix this this, then it imported ok:

import type { PrismaClient as PrismaClientType } from ***@***.***/client';
import type { PrismaClient as ImportedPrismaClient } from ***@***.***/client';
import { createRequire } from 'module';

const require = createRequire(import.meta.url ?? __filename);
const { PrismaClient: RequiredPrismaClient } = ***@***.***/client');
const _PrismaClient: typeof ImportedPrismaClient = RequiredPrismaClient;

[henrycrib]

Yes, I was able to fix this this, then it imported ok:

import type { PrismaClient as PrismaClientType } from '@prisma/client';
import type { PrismaClient as ImportedPrismaClient } from '@prisma/client';
import { createRequire } from 'module';


const require = createRequire(import.meta.url ?? __filename);
const { PrismaClient: RequiredPrismaClient } = require('@prisma/client');
const _PrismaClient: typeof ImportedPrismaClient = RequiredPrismaClient;

export class PrismaClient extends _PrismaClient {}

[zimonitrome]

I think I solved this now by adding ssr to the vite.config.ts file:

import solid from "solid-start/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [solid()],
  ssr: { external: ["@prisma/client"] }
});

This makes the final server.js only import @prisma/client instead of a .jsm module.

[arily]

When you switched to our ESM version, did everything work as expected?

yes

What changes did you need to make in order to switch to our ESM version?

Very smooth in general.

• change from require statement to import statement
• with multi schema setup I have to change some import paths due to ESM not allowing directory imports.
  was built to node_modules/.prisma/a and node_modules/.prisma/b, and I can import with require(".prisma/a") / require(".prisma/b"). Now renamed to node_modules/prisma-a and node_modules/prisma-b

Which package manager are you using?

yarn (classic 1.22.19)

Is a bundler in use? If yes, which one?

vite and nitro

Is a framework in use? If yes, which one?

nuxt

Your project uses TypeScript or just JavaScript?

Both

Anything worth mentioning?

This is a very pleasing experience! GJ

[zogs]

When you switched to our ESM version, did everything work as expected?
yes

What changes did you need to make in order to switch to our ESM version?
npm i -D prisma@4.15.0-integration-feat-client-esm.27 @prisma/client@4.15.0-integration-feat-client-esm.27

Which package manager are you using?
npm 9.6.2

Is a bundler in use? If yes, which one?
Vite 4.3.0

Is a framework in use? If yes, which one?
sveltekit 1.15

Your project uses TypeScript or just JavaScript?
JS

Anything worth mentioning?
Solved #14484, thank you for this !

[SiNONiMiTY]

When you switched to our ESM version, did everything work as expected?
Yes.

Did you encounter anything unexpected? If so, please let us know how that happened.
No.

What changes did you need to make in order to switch to our ESM version?
Install the ESM variants

How smooth was the upgrade, and did everything work just as before?
Yes

Which package manager are you using?
pnpm

Is a bundler in use? If yes, which one?
Vite

Is a framework in use? If yes, which one?
SvelteKit

Your project uses TypeScript or just JavaScript?
TypeScript

Anything worth mentioning?
Fixes __dirname problem when building SvelteKit with adapter-node

[bartektelec]

When you switched to our ESM version, did everything work as expected?
Did you encounter anything unexpected? If so, please let us know how that happened.

Yes

What changes did you need to make in order to switch to our ESM version?
How smooth was the upgrade, and did everything work just as before?

Installed prisma@4.15.0-integration-feat-client-esm.27 and @prisma/client@4.15.0-integration-feat-client-esm.27

Which package manager are you using?
For instance npm, pnpm, or yarn. Please attach the version if you know it.

PNPM 8.3.1

Is a bundler in use? If yes, which one?
Are you using webpack, swc, esbuild, rollup, or any other bundler?

Vite 4.4.2

Is a framework in use? If yes, which one?
Are you using Next.js, Next, or any other framework?

SvelteKit

Your project uses TypeScript or just JavaScript?
Do you prefer using TypeScript or JavaScript within your project, or both?

TypeScript

Anything worth mentioning?
This is very much a free form answer, for anything you think is important or useful to us.

Broke imports from @prisma/client/runtime which I think were deprecated for a while either way

[beshur]

Broke imports from @prisma/client/runtime which I think were deprecated for a while either way

How did you fix it?

[bartektelec]

In my scenario I was splitting my code into pnpm workspaces monorepo (and updated my deps at the same time without testing it through).
My structure would look like

/ packages
   - /clientapp/
   - /db/

I started getting errors about the __dirname not being in scope when I moved everything out in a separate package and would import the generated client from the "db" package like

import {PrismaClient} from 'db';

So I started going back and reverting changes one by one and ended up adding @prisma/client 4.16.2 (same as in db package) to the dependencies in clientapp package and that did the trick, I didn't need to use this ESM fix anyway

[beshur]

When you switched to our ESM version, did everything work as expected?

Nope

Did you encounter anything unexpected? If so, please let us know how that happened.

$ rm -rf dist && tsc && tsc-alias -p tsconfig.json && rollup -c
node_modules/.prisma/client/index.d.ts:6:26 - error TS2307: Cannot find module '@prisma/client/runtime/library' or its corresponding type declarations.
6 import * as runtime from '@prisma/client/runtime/library';

Even though @prisma/client/runtime/library exists, and I've run prisma generate. Also prisma and @prisma/client are in dependencies

What changes did you need to make in order to switch to our ESM version?

How smooth was the upgrade, and did everything work just as before?

Not working yet

Which package manager are you using?

For instance npm, pnpm, or yarn. Please attach the version if you know it.
yarn

Is a bundler in use? If yes, which one?

Are you using webpack, swc, esbuild, rollup, or any other bundler?

rollup

Is a framework in use? If yes, which one?

Are you using Next.js, Next, or any other framework?

express

Your project uses TypeScript or just JavaScript?

Do you prefer using TypeScript or JavaScript within your project, or both?

Typescript

Anything worth mentioning?

This is very much a free form answer, for anything you think is important or useful to us.

tsconfig:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "allowJs": true
  },
  "include": ["src/**/*", "prisma/**/*"],
  "tsc-alias": {
    "resolveFullPaths": true,
    "verbose": false
  }
}

[faizan-ali]

When you switched to our ESM version, did everything work as expected?

Did you encounter anything unexpected? If so, please let us know how that happened.

Mostly worked out of the box.

What changes did you need to make in order to switch to our ESM version?

How smooth was the upgrade, and did everything work just as before?

I have pnpm workspace monorepo setup where the prisma client lives outside the packages using it.
I had to specify the .mjs file in the import in only one place. I don't know why.

import { PrismaClient } from '../../../libs/db/prisma/client/index.mjs'

Which package manager are you using?

For instance npm, pnpm, or yarn. Please attach the version if you know it.

pnpm 8.6.11

Is a bundler in use? If yes, which one?

Are you using webpack, swc, esbuild, rollup, or any other bundler?

webpack for Vercel packages.
Regular tsc for everything else.

Is a framework in use? If yes, which one?

Are you using Next.js, Next, or any other framework?

Next and Express

Your project uses TypeScript or just JavaScript?

Do you prefer using TypeScript or JavaScript within your project, or both?

Just Typescript, prefer using only that.