not compatible with prisma

[vincenteof]

Trying to add prisma to an waku project, but seems that they are not compatible. @prisma/client doesn't have esm export. When the server component render, error shows:
Cannot render RSC ReferenceError: module is not defined
Here is the repo link which reproduces the error.
I am not familiar with vite, but I have followed Server-Side Rendering section on vite official doc and add prisma to it, and this kind of error doesn't show, not sure it's a bug from vite or the waku behavior.
Here is the repo link in which prisma works with vite.

[dai-shi]

Hi, thanks for reporting!
I'll look into it next week.
Meanwhile, if anyone is interested, feel free to dig in.

[vincenteof]

After debugging for sometime, it seems that @prisma/client is not externalized when running in vite ssr mode.

  ssr: {
    noExternal: /^(?!node:)/,
    // FIXME this is very adhoc.
    external: ["react", "minimatch", "react-server-dom-webpack"],
  }

I can provide the config and override it, and everything is ok.
But shouldn't we externalize most of the dependencies when rendering RSC?

[dai-shi]

After debugging for sometime, it seems that @prisma/client is not externalized when running in vite ssr mode.

Nice finding!

  ssr: {
    noExternal: /^(?!node:)/,
    // FIXME this is very adhoc.
    external: ["react", "minimatch", "react-server-dom-webpack"],
  }

I can provide the config and override it, and everything is ok.

Do you mean you edit your vite.config.ts to add the external field? That sounds like a valid solution for now.

But shouldn't we externalize most of the dependencies when rendering RSC?

Yes, we should. I just haven't been able to find a solution yet. I would appreciate for any help.

[vincenteof]

Do you mean you edit your vite.config.ts to add the external field? That sounds like a valid solution for now.

Yes, I provide something like

  ssr: {
    noExternal: /^(?!node:)/,
    external: ["react", "minimatch", "react-server-dom-webpack", "@prisma/client", "prisma"],
  }

in the vite config file.

Yes, we should. I just haven't been able to find a solution yet. I would appreciate for any help.

I found vite will externalize all the dependencies by default in ssr mode, could we just use the default behavior?

[dai-shi]

If you externalize a package, it won't be processed by vite and waku, which means we can't handle "use client" directive.

[vincenteof]

Oh I see, so the problem is we need to deal with third party dependencies which are most likely some react component libraries. Since there will be more dependencies to be externalized than not to be externalized, maybe we could make the default noExternal scope smaller. waku could provide an abstraction for "client dependencies", and manually append these dependencies to internal noExternal config. Does this sound a good strategy to you?

[dai-shi]

So, it's opt-in strategy instead of opt-out strategy as of now. I would like to see how other frameworks would go with this problem before deciding our strategy.

[dai-shi]

@vincenteof Can you try #103 and see if it works?
https://ci.codesandbox.io/status/dai-shi/waku/pr/103
☝️ Find "Local Install Instructions"

[vincenteof]

Sorry for the late response, since I have been busy these days.
I have tried the newest waku, and the problem appears to still exist.
Here is the reproduction repo link:
https://github.com/vincenteof/waku-with-prisma/tree/main
Correct me if I've misunderstood or made some mistake.

[dai-shi]

@vincenteof We haven't released a new version yet.
Please try the codesandbox build.

pnpm i https://pkg.csb.dev/dai-shi/waku/commit/160238f1/waku

[vincenteof]

I tried the codesandbox build version, and the resolution error disappears!
Here is the repo link:
https://github.com/vincenteof/waku-with-prisma/tree/waku_codesandbox_build
Actually, I wonder why the custom node loader solves the problem 🤔

[dai-shi]

Thanks. Yeah, #103 should solve all related issues.
Originally, I wanted to let Vite handle for all transformation. But, it causes issues like this one. The node loader is a solution to handle "use client" on server without Vite.
(It doesn't feel ideal to me, so we look for other solutions in the future. Hoping react-server-dom-vite would do.)

[dai-shi]

v0.14.0 is released.