remix: [Bug]: PrismaClient execution fails on @remix-run/cloudflare-workers

What version of Remix are you using?

1.0.4

Steps to Reproduce

Use create-remix to create a project. Select Cloudflare Workers at that time.
Install and build prisma.
Write new PrismaClient() in the loader or in app/utils/db.server.ts.
Start up miniflare with yarn start.

Expected Behavior

new PrismaClient() should run without problems.

Actual Behavior

$ yarn start
yarn run v1.22.17
$ miniflare --build-command "npm run dev:worker" --watch

> dev:worker
> esbuild --define:process.env.NODE_ENV='"development"' --bundle --sourcemap --outdir=dist ./worker


  dist/worker.js      609.5kb
  dist/worker.js.map  903.5kb

[mf:inf] Build succeeded
true
[mf:err] /Users/myusername/git/remix-tutorial-cloudflare/dist/worker.js:13428
          throw new Error(`PrismaClient is unable to be run in the browser.
          ^

Error: PrismaClient is unable to be run in the browser.
In case this error is unexpected for you, please report it in https://github.com/prisma/prisma/issues
    at new PrismaClient (/Users/myusername/git/remix-tutorial-cloudflare/node_modules/.prisma/client/index-browser.js:153:11)
    at build/index.js (/Users/myusername/git/remix-tutorial-cloudflare/build/index.js:76:21)
    at __require (/Users/myusername/git/remix-tutorial-cloudflare/dist/worker.js:13:46)
    at /Users/myusername/git/remix-tutorial-cloudflare/worker/index.js:3:24
    at /Users/myusername/git/remix-tutorial-cloudflare/dist/worker.js:14682:3
    at Script.runInContext (node:vm:139:12)
    at VMScriptRunner.runAsScript (file:///Users/myusername/git/remix-tutorial-cloudflare/node_modules/@miniflare/runner-vm/src/index.ts:21:12)
    at VMScriptRunner.run (file:///Users/myusername/git/remix-tutorial-cloudflare/node_modules/@miniflare/runner-vm/src/index.ts:71:12)
    at EventTarget.#reload (file:///Users/myusername/git/remix-tutorial-cloudflare/node_modules/@miniflare/core/src/index.ts:437:38)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I have confirmed that this problem does not occur in remix-run/node.
I have read the official Prisma documentation. I tried to change the alias, but the build fails.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 13
Comments: 19 (6 by maintainers)

Most upvoted comments

Hey everyone. We have released some changes a few minutes ago in prisma@3.15.0. tl;dr;

Instead of PRISMA_CLIENT_ENGINE_TYPE, use prisma generate --data-proxy to enable the Data Proxy
import { PrismaClient } from '@prisma/client/edge' for a Workers-compatible Prisma Client
Please be aware that .env aren’t bundled into the generated Prisma Client any longer (see docs)
You can also remove any package location aliasing from your build scripts
Warnings around eval are now also fixed

Thanks everyone, and your feedback is welcome.

millsp on Jun 7, 2022

(When I name the script file for esbuild build.js, it fails to build. The reason is not known.)

this is due to the fact that remix compiles the server-side javascript under <root>/build/ and worker.js then references said built files via import * as build from "../build" -> the worker.js ends up importing your build.js file and will obviously not do what’s intended. The quick fix is to either rename the file like you did or change the import to ../build/index

kettui on Dec 17, 2021

@aiji42 This is great news, thank you for taking the time to confirm the code and have a great day!

yelban on May 3, 2022

https://github.com/aiji42/remix-esbuild-override/tree/main/examples/prisma-cloudflare

aiji42 on Apr 17, 2022

I was able to avoid this problem by creating worker.build.js and changing the alias.
(When I name the script file for esbuild build.js, it fails to build. The reason is not known.)

// worker.build.js
const alias = require('esbuild-plugin-alias');

const isProd = process.env.NODE_ENV === 'production'

require('esbuild')
  .build({
    entryPoints: ['./worker'],
    bundle: true,
    sourcemap: true,
    minify: isProd,
    outdir: 'dist',
    define: {
      "process.env.NODE_ENV": `"${process.env.NODE_ENV ?? 'development'}"`,
    },
    plugins: [
      alias({
        '@prisma/client': require.resolve('@prisma/client'),
      }),
    ],
  })
  .catch(() => process.exit(1));

# package.json

  "scripts": {
    ...
    "build:worker": "NODE_ENV=production node worker.build.js",
    "dev:worker": "node worker.build.js",
    "start": "miniflare --build-command \"npm run dev:worker\" --watch",
    ...
  },

$ yarn start                                                                                                                                           
yarn run v1.22.17
$ miniflare --build-command "npm run dev:worker" --watch

> dev:worker
> node worker.build.js

[mf:inf] Build succeeded
[mf:inf] Worker reloaded! (0.93MiB)
[mf:inf] Listening on :8787
[mf:inf] - http://127.0.0.1:8787
[mf:inf] - http://172.20.249.97:8787

aiji42 on Nov 26, 2021