#How to solve Worker Node compat requirements with Vite environment

1 messages · Page 1 of 1 (latest)

grim grove
#

Hello friend.

I want to deploy my apps to CF so i tried it locally with Wrangler. I can build my apps just fine. For CF worker instead, it will fail since some deep dependencies are importing node standard api without node: prefix. In particular, these pkg: cookie-signature, stream-slice.

Since i know now that thse packages should not be externalized, i tried to bundle them via ssr.noExternal. And guess what, vite just seems to ignore it and refuse to bundle it.

Any idea?

raven raft
#

If you solve this, please share!

I've had to go to library owners to ask for node: prefix.

GitHub

Use node import for 'crypto' node builtin module to ease Cloudflare deploy with Vite.
Cloudflare offers some node.js compatibility if you switch it on and use the node: prefix in your impor...

GitHub

Closes #9
paddle-node-sdk does not run on Cloudflare because it imports crypto without a node: prefix. Node.js compatibility in Cloudflare requires the node: prefix per https://developers.cloudflar...

grim grove
#

Sorry but i solved it by actually succeeding in bundling everything. But i can give pointer.

I think this is doable without changing any code from dependencies if you pass every dependencies through vite (by bundling or compiling) and then use:
custom plugin to transform every resolve path from non-prefixed to node: prefixed

or, for easier method, use resolve.alias (https://vitejs.dev/config/shared-options#resolve-alias) and add every node standard modules you use to prefixed format, for example { "crypto": "node:crypto" }. But remember that all those dependencies needs to be transformed via vite so either bundling or compiling, not externalizing it

Next Generation Frontend Tooling

#

in actuality, to build a cloudflare workers, you have no choice but to bundle and/or compile every deep dependencies, and you cant import node_modules in worker anyway

raven raft
#

Thanks for reporting back on your success and for the pointers. Wondering if it's possible for you to share your vite.config.ts or relevant snippets from it so I can see more concretely how things are laid out.

grim grove
#

here is my full config: https://gist.github.com/slainless/6e9b4bffe3ab161cbb79518b4e3c51c1

Luckily most of my dependency didn't depend too much on node-only logic, so far no problem on my end. What i'm most cautious of instead is dependency which depends on node native modules, something like canvas etc.

Basically, what i'm doing when building for cloudflare are:

  • bundling all dependencies via ssr.noExternal = true
  • make vite obey package.json's browser field via ssr.target = webworker
  • added resolve conditions for cloudflare via ssr.resolve.conditions which prioritize importing with conditions workerd, worker, and then import and so on
  • minify bundled js via build.minify = esbuild
  • and lastly, for path transforming (for example, from crypto to node:crypto) i use resolve. But since wrangler didn't complain about node: anymore (i think since i use resolve conditions to prioritize worker and target = webworker, almost all my dependencies switched to using browser-only sub-dependencies), i only use this field to alias all @remix-run/node usage to @remix-run/cloudflare if building for cloudflare
Gist

Remix Cloudflare + Express Vite Config. GitHub Gist: instantly share code, notes, and snippets.