[🐞]Building Prisma with Vercel-Edge generates compile errors

[noahshaf]

Which component is affected?

Qwik Runtime

Describe the bug

I created the starter app and added two integrations: Prisma and Vercel-Edge. Here is the sequence:

• added Prisma integration, generated the Prisma client, and ran the sample - everything worked fine, locally.
• added Vercel-Edige integration and ran 'pnpm run build'. Build FAILS with this error:

.prisma/client/index-browser" is imported by ".prisma/client/index-browser?commonjs-external", but could not be resolved – treating it as an external dependency. error during build: TypeError [PLUGIN_ERROR]: Invalid module ".prisma/client/index-browser" is not a valid package name imported from /Users/noahshaffer/WebstormProjects/qwik-prisma-vercel-test/.vercel/output/functions/_qwik-city.func/@qwik-city-plan.js at new NodeError (node:internal/errors:399:5) at parsePackageName (node:internal/modules/esm/resolve:817:11) at packageResolve (node:internal/modules/esm/resolve:840:5) at moduleResolve (node:internal/modules/esm/resolve:938:20) at defaultResolve (node:internal/modules/esm/resolve:1153:11) at nextResolve (node:internal/modules/esm/loader:163:28) at ESMLoader.resolve (node:internal/modules/esm/loader:838:30) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18) at ModuleWrap. (node:internal/modules/esm/module_job:77:40) at link (node:internal/modules/esm/module_job:76:36)

I've had this same problem with using npm (in another sample) and pnpm.

Reproduction

https://stackblitz.com/edit/qwik-starter-eyehgf?file=package.json

Steps to reproduce

• added the starter package with 'npm create qwik-latest'. => runs fine locally
• added Prisma integration, generated the Prisma client, and ran the sample => runs fine locally, able to use Prisma to add a user..
• added Vercel-Edige integration and ran 'pnpm run build'. Build FAILS with this error:

.prisma/client/index-browser" is imported by ".prisma/client/index-browser?commonjs-external", but could not be resolved – treating it as an external dependency. error during build: TypeError [PLUGIN_ERROR]: Invalid module ".prisma/client/index-browser" is not a valid package name imported from /Users/noahshaffer/WebstormProjects/qwik-prisma-vercel-test/.vercel/output/functions/_qwik-city.func/@qwik-city-plan.js at new NodeError (node:internal/errors:399:5) at parsePackageName (node:internal/modules/esm/resolve:817:11) at packageResolve (node:internal/modules/esm/resolve:840:5) at moduleResolve (node:internal/modules/esm/resolve:938:20) at defaultResolve (node:internal/modules/esm/resolve:1153:11) at nextResolve (node:internal/modules/esm/loader:163:28) at ESMLoader.resolve (node:internal/modules/esm/loader:838:30) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18) at ModuleWrap. (node:internal/modules/esm/module_job:77:40) at link (node:internal/modules/esm/module_job:76:36)

I've had this same problem with using npm (in another sample) and pnpm.

System Info

Mac OS Ventura 
Chrome browser
VS Code

Additional Information

Note: this is not really Qwik runtime - but I could not figure out what category the issue falls in.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-eyehgf (Open reproduction)

[manucorporat]

Prisma is well known for not working well in edge, unfortunately, not the best choice to deploy in edge

[manucorporat]

But going to look into the error

[manucorporat]

https://www.prisma.io/blog/database-access-on-the-edge-8F0t1s1BqOJE

[noahshaf]

thanks - I know about the cautions with Prisma and the edge and will likely abandon it - just thought you should know about this problem.

BTW: the same problem occurs with the CloudFlare Pages adapter.

I forgot to note this nuance. Build works with the dependency but as soon as you add a call (let prisma = new PrismaClient()) the compile error surfaces.

[ouariachi]

I have the same problem with the Netlify adapter.

Error: 7:18:32 PM: ".prisma/client/index-browser" is imported by ".prisma/client/index-browser?commonjs-external", but could not be resolved – treating it as an external dependency.

7:18:32 PM: error during build: 7:18:32 PM: TypeError [PLUGIN_ERROR]: Invalid module ".prisma/client/index-browser" is not a valid package name imported from /opt/build/repo/.netlify/edge-functions/entry.netlify-edge/@qwik-city-plan.js 7:18:32 PM: at new NodeError (node:internal/errors:399:5) 7:18:32 PM: at parsePackageName (node:internal/modules/esm/resolve:722:11) 7:18:32 PM: at packageResolve (node:internal/modules/esm/resolve:745:5) 7:18:32 PM: at moduleResolve (node:internal/modules/esm/resolve:843:20) 7:18:32 PM: at defaultResolve (node:internal/modules/esm/resolve:1058:11) 7:18:32 PM: at nextResolve (node:internal/modules/esm/loader:163:28) 7:18:32 PM: at ESMLoader.resolve (node:internal/modules/esm/loader:835:30) 7:18:32 PM: at ESMLoader.getModuleJob (node:internal/modules/esm/loader:416:18) 7:18:32 PM: at ModuleWrap. (node:internal/modules/esm/module_job:76:40) 7:18:32 PM: at link (node:internal/modules/esm/module_job:75:36)

[ArnavK-09]

Same error on deno adapter as well

[Thomva]

Adding this to my vite.config.ts seems to fix it for me:

resolve: {
  alias: {
    ".prisma/client/index-browser": "./node_modules/.prisma/client/index-browser.js"
  }
},

[gioboa]

Adding this to my vite.config.ts seems to fix it for me:

resolve: {
  alias: {
    ".prisma/client/index-browser": "./node_modules/.prisma/client/index-browser.js"
  }
},

This configuration solves the build error, but prisma isn't working as expected at runtime. @Thomva is it working in your project?

[Thomva]

It does seem to work fine, although I haven't tested it thoroughly.

However, I do get an error when deploying to Vercel, Netlify or Cloudflare Pages (looks like PrismaClient runs from the browser for some reason), see this comment. Not sure if it has to do with this fix

[gioboa]

@ruheni can you help us with this issue pls?

[kokecar11]

Adding this to my vite.config.ts seems to fix it for me:

resolve: {
  alias: {
    ".prisma/client/index-browser": "./node_modules/.prisma/client/index-browser.js"
  }
},

This fixes only the app build, but when deploying the Vercel app it crashes again.

[gioboa]

Prisma has a well known issue with edge function. There is an issue in their repository https://github.com/prisma/prisma/issues/18763 Let's monitoring it.

[kokecar11]

Which component is affected?

Qwik Runtime

Describe the bug

I created the starter app and added two integrations: Prisma and Vercel-Edge. Here is the sequence:

• added Prisma integration, generated the Prisma client, and ran the sample - everything worked fine, locally.
• added Vercel-Edige integration and ran 'pnpm run build'. Build FAILS with this error:

.prisma/client/index-browser" is imported by ".prisma/client/index-browser?commonjs-external", but could not be resolved – treating it as an external dependency. error during build: TypeError [PLUGIN_ERROR]: Invalid module ".prisma/client/index-browser" is not a valid package name imported from /Users/noahshaffer/WebstormProjects/qwik-prisma-vercel-test/.vercel/output/functions/_qwik-city.func/@qwik-city-plan.js at new NodeError (node:internal/errors:399:5) at parsePackageName (node:internal/modules/esm/resolve:817:11) at packageResolve (node:internal/modules/esm/resolve:840:5) at moduleResolve (node:internal/modules/esm/resolve:938:20) at defaultResolve (node:internal/modules/esm/resolve:1153:11) at nextResolve (node:internal/modules/esm/loader:163:28) at ESMLoader.resolve (node:internal/modules/esm/loader:838:30) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18) at ModuleWrap. (node:internal/modules/esm/module_job:77:40) at link (node:internal/modules/esm/module_job:76:36)

I've had this same problem with using npm (in another sample) and pnpm.

Reproduction

https://stackblitz.com/edit/qwik-starter-eyehgf?file=package.json

Steps to reproduce

• added the starter package with 'npm create qwik-latest'. => runs fine locally
• added Prisma integration, generated the Prisma client, and ran the sample => runs fine locally, able to use Prisma to add a user..
• added Vercel-Edige integration and ran 'pnpm run build'. Build FAILS with this error:

.prisma/client/index-browser" is imported by ".prisma/client/index-browser?commonjs-external", but could not be resolved – treating it as an external dependency. error during build: TypeError [PLUGIN_ERROR]: Invalid module ".prisma/client/index-browser" is not a valid package name imported from /Users/noahshaffer/WebstormProjects/qwik-prisma-vercel-test/.vercel/output/functions/_qwik-city.func/@qwik-city-plan.js at new NodeError (node:internal/errors:399:5) at parsePackageName (node:internal/modules/esm/resolve:817:11) at packageResolve (node:internal/modules/esm/resolve:840:5) at moduleResolve (node:internal/modules/esm/resolve:938:20) at defaultResolve (node:internal/modules/esm/resolve:1153:11) at nextResolve (node:internal/modules/esm/loader:163:28) at ESMLoader.resolve (node:internal/modules/esm/loader:838:30) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18) at ModuleWrap. (node:internal/modules/esm/module_job:77:40) at link (node:internal/modules/esm/module_job:76:36)

I've had this same problem with using npm (in another sample) and pnpm.

System Info

Mac OS Ventura 
Chrome browser
VS Code

Additional Information

Note: this is not really Qwik runtime - but I could not figure out what category the issue falls in.

I found a workaround and that is to deploy qwik with express on Vercel, without the Vercel-Edge adapter.

[gabriiels]

@kokecar11 How did you solve it? Do you have any example of the configuration? I have the same problem

[Jolg42]

Could you try that and let us know if that works for you? See:

I found out that this could be solved with 2 aliases, see my repro here: https://github.com/Jolg42/prisma-repro-21094

This is what worked for me: https://github.com/Jolg42/prisma-repro-21094/blob/main/adapters/vercel-edge/vite.config.ts

import { vercelEdgeAdapter } from "@builder.io/qwik-city/adapters/vercel-edge/vite";
import { extendConfig } from "@builder.io/qwik-city/vite";
import baseConfig from "../../vite.config";

export default extendConfig(baseConfig, () => {
  return {
    build: {
      ssr: true,
      rollupOptions: {
        input: ["src/entry.vercel-edge.tsx", "@qwik-city-plan"],
      },
      outDir: ".vercel/output/functions/_qwik-city.func",
    },
    plugins: [vercelEdgeAdapter()],
    resolve: {
      alias: {
        ".prisma/client/default": "./node_modules/.prisma/client/default.js",
        "./query_engine_bg.wasm?module": "./node_modules/.prisma/client/query_engine_bg.wasm?init",
      },
    },
  };
});

I found out about this in Vite's docs here https://vitejs.dev/guide/features#webassembly

Pre-compiled .wasm files can be imported with ?init.

Originally posted by @Jolg42 in https://github.com/prisma/prisma/issues/21094#issuecomment-2142474474

[PerfectedApp]

@Jolg42 I personally get a new error when doing this workaround:

ReferenceError: __dirname is not defined in ES module scope,

Seems because __dirname is a CommonJS variable that is not available in ES module scope.

[Jolg42]

@PerfectedApp Did you try the reproduction repo I shared in my previous comment?

I guess that if you try that code it works? It would be interesting if you could share and identify what is different in your config.

[PerfectedApp]

I found a solution for my end, but it seems it does need to be patched on Qwik City.

the opts["qwikCityPlanModulePath'} needs to have added to it:

import { fileURLToPath } from 'url'; import { dirname } from 'path'; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename);

And for resolve, as I'm using Turso sqlite:

resolve: { alias: { ".prisma/client/default": "./node_modules/.prisma/client/index.js",