search

QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.64k stars 1.28k forks source link

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

Open noahshaf opened 1 year ago

noahshaf commented 1 year ago

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:

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

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] commented 1 year ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

manucorporat commented 1 year ago

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

manucorporat commented 1 year ago

But going to look into the error

manucorporat commented 1 year ago

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

noahshaf commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Same error on deno adapter as well

Thomva commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@ruheni can you help us with this issue pls?

kokecar11 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 5 months ago

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

Jolg42 commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

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",