vite:build on CloudFlare

[JasonColeyNZ]

I need some assistance on getting an app working on CloudFlare using Vite. I have upgraded to 2.6.0 and am trying to deploy to CF, but the build gets stuck on remix vite:build. Nothing happens, no errors, nothing. I guess I'm really asking for tips on how to debug, are there logs anywhere that I can use to find out why this is happening. Below is the log that CF is providing, not much there to see??

2024-02-05T21:26:47.323833974Z Cloning repository...
2024-02-05T21:26:48.613009082Z From https://github.com/JasonColeyNZ/schedule-app
2024-02-05T21:26:48.613049543Z * branch 8ad7ad9ad203b763b1e9fb6a9e948c103c202d28 -> FETCH_HEAD
2024-02-05T21:26:48.613055302Z
2024-02-05T21:26:48.734193423Z HEAD is now at 8ad7ad9 fixes to build
2024-02-05T21:26:48.734593186Z
2024-02-05T21:26:48.830018665Z
2024-02-05T21:26:48.832759432Z Using v2 root directory strategy
2024-02-05T21:26:48.866003488Z Success: Finished cloning repository files
2024-02-05T21:26:49.685473631Z Detected the following tools from environment: [email protected], [email protected]
2024-02-05T21:26:49.685854092Z Installing project dependencies: npm clean-install --progress=false
2024-02-05T21:26:55.984271978Z npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
2024-02-05T21:26:56.66324666Z npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
2024-02-05T21:26:56.732313011Z npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
2024-02-05T21:26:56.732943495Z npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
2024-02-05T21:26:56.766065351Z npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
2024-02-05T21:26:56.997683757Z npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
2024-02-05T21:26:58.188333718Z npm WARN deprecated [email protected]: Please upgrade to v7.0.2+ of superagent. We have fixed numerous issues with streams, form-data, attach(), filesystem errors not bubbling up (ENOENT on attach()), and all tests are now passing. See the releases tab for more information at https://github.com/visionmedia/superagent/releases.
2024-02-05T21:26:58.90029228Z npm WARN deprecated [email protected]: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau
2024-02-05T21:27:28.34165693Z
2024-02-05T21:27:28.342010702Z > postinstall
2024-02-05T21:27:28.342037562Z > prisma generate
2024-02-05T21:27:28.342204636Z
2024-02-05T21:27:28.975616871Z Prisma schema loaded from app/database/schema.prisma
2024-02-05T21:27:30.117549544Z
2024-02-05T21:27:30.117661711Z ✔ Generated Prisma Client (v5.9.1) to ./node_modules/@prisma/client in 537ms
2024-02-05T21:27:30.117853462Z
2024-02-05T21:27:30.118031018Z Start using Prisma Client in Node.js (See: https://pris.ly/d/client)
2024-02-05T21:27:30.118380765Z 2024-02-05T21:27:30.11840776Z import { PrismaClient } from '@prisma/client' 2024-02-05T21:27:30.118693519Z const prisma = new PrismaClient() 2024-02-05T21:27:30.118826465Z
2024-02-05T21:27:30.119031962Z or start using Prisma Client at the edge (See: https://pris.ly/d/accelerate)
2024-02-05T21:27:30.119186627Z 2024-02-05T21:27:30.11940529Z import { PrismaClient } from '@prisma/client/edge' 2024-02-05T21:27:30.119478897Z const prisma = new PrismaClient() 2024-02-05T21:27:30.119660007Z
2024-02-05T21:27:30.119990724Z
2024-02-05T21:27:30.120073248Z See other ways of importing Prisma Client: http://pris.ly/d/importing-client
2024-02-05T21:27:30.120229425Z
2024-02-05T21:27:30.120361875Z ┌─────────────────────────────────────────────────────────────┐
2024-02-05T21:27:30.120532132Z │ Deploying your app to serverless or edge functions? │
2024-02-05T21:27:30.120842208Z │ Try Prisma Accelerate for connection pooling and caching. │
2024-02-05T21:27:30.121003871Z │ https://pris.ly/cli/accelerate │
2024-02-05T21:27:30.121190065Z └─────────────────────────────────────────────────────────────┘
2024-02-05T21:27:30.121360643Z
2024-02-05T21:27:30.224164562Z
2024-02-05T21:27:30.224754808Z added 1567 packages, and audited 1785 packages in 40s
2024-02-05T21:27:30.224779119Z
2024-02-05T21:27:30.225453988Z 371 packages are looking for funding
2024-02-05T21:27:30.225772373Z run npm fund for details
2024-02-05T21:27:30.229641973Z
2024-02-05T21:27:30.230041476Z 2 moderate severity vulnerabilities
2024-02-05T21:27:30.230432153Z
2024-02-05T21:27:30.230440911Z Some issues need review, and may require choosing
2024-02-05T21:27:30.230511131Z a different dependency.
2024-02-05T21:27:30.230838688Z
2024-02-05T21:27:30.231038783Z Run npm audit for details.
2024-02-05T21:27:30.253779864Z Executing user command: npm run build
2024-02-05T21:27:30.925516833Z
2024-02-05T21:27:30.925719144Z > build
2024-02-05T21:27:30.925876473Z > remix vite:build
2024-02-05T21:27:30.926044611Z

[JasonColeyNZ]

OK the issue here was installGlobals() in the vite.config.ts file, causes a lockup or something on CF. No error messages, just freezes their build completly.

[JasonColeyNZ]

Now the 3 messages I am getting are...

16:09:39.191 ../node_modules/stream-slice/index.js:3:24:
16:09:39.191 3 │ var Transform = require('stream').Transform;
16:09:39.190 ../node_modules/cookie-signature/index.js:5:21:
16:09:39.190 5 │ var crypto = require('crypto');
16:09:39.188 ../node_modules/@mailchimp/mailchimp_marketing/src/ApiClient.js:18:26:
16:09:39.188 18 │ var querystring = require('querystring');
the stream-slice and cookie-signature errors appear to be because I'm using remix-utils, I have the nodejs_compat compatibility flag set in CF, not sure what to do now about these errors?

[NicoCPH]

I have the same issue:
../node_modules/cookie-signature/index.js:5:21: ERROR: Could not resolve "crypto"
../node_modules/stream-slice/index.js:3:24: ERROR: Could not resolve "stream"

Have you found a fix yet?

[joaoguidev]

I have the same issue.

[imikay]

Just update compatibility flags to nodejs_compat_v2 if you are not using wrangler.toml, otherwise set compatibility_flags = ["nodejs_compat_v2"]. Took me a while to figure it out.

[JasonColeyNZ]

No I didn't get it working with CF, in the end I was using remix-run/node locally and deploying using remix-run/cloudflare.
I'm using Fly.io now, as I was also hitting the size limit on the CF Pages. I'm not a dev-ops and this all became so much hassle, serverless might be great for some things, but I also found my pages were too slow to startup on the serverless and sometimes I would get timeout issues on CF. Having a fly.io server works much better for me. The app I building is very data intensive, so I think, from what I found, CF pages wasn't the right place for me.

Fly.io and Supabase are working together right now, I'm now starting with a new beta product, so I can have managed PG right next to my fly server, so data access should be almost instant.

Good luck!

P.S. to be honest I stopped a few Remix versions ago to get CF working, have you got their latest builds installed?

[NicoCPH]

I might change to Fly.io aswell, i still havn't find a solution, i guees its something with the CF workers not working with all node functions. So i have to commit fully to go CF because of refactoring.. so i think i will give fly.io a try and see if it's easier ;)

And yes all my packages was latest build

[AdiRishi]

I've been running remix on Cloudflare Pages for the past 6 months, no issue whatsoever. I have both esbuild versions and Vite versiosn deployed live in production, working just fine.

Just at a cursory glance, I can see you're using Prisma, which would definitely have a lot of issues in a WinterCG environment (which is what Cloudflare uses). I would recommend using an ORM like drizzle, much better performance and it runs in all edge environments.

[predaytor]

@AdiRishi good to hear that. Considering to use Cloudflare myself, Is there anything to be aware of, specifically the limitations of the D1 database for concurrent read/writes? Is there any potential problems integrating solutions like Durable Objects and Websockets? Thx

[AdiRishi]

@predaytor I personally haven't come across any major red flags. In fact I think it's been a great experience so far. There are quirks as there are in any system, but nothing that caused me to regret my choice.

[joaoguidev]

Hello.

I think these steps might help to deploy Remix Vite using Cloudflare Pages:

Change the output directory to build/client

If you are using crypto with Cloudflare or other native node functionalities in your app add the flag "nodejs_compat"

And installGlobals() indeed freezes the deployment. Comment it out and check if the app works on production without it. Mine did.

[jamesslomka]

Ensure you aren't using anything from @remix-run/node and instead, @remix-run/cloudflare

[kuancto]

applause…

[Eric-Alain]

Not sure if this will help anyone but I thought to share my experience and how I solved my own issue, even though it isn't prisma related.

Similar to @NicoCPH, I was receiving errors such as:

ERROR: Could not resolve "crypto"
ERROR: Could not resolve "stream"

... and so on during my Remix Cloudflare pages preview (remix vite:build && wrangler pages dev ./build/client)

I quadruple-checked literally everywhere in my app to make sure I was using @remix-run/cloudflare instead of @remix-run/node. No luck.

I tried using the wrangler nodejs_compat or nodejs_compat_v2 wrangler compatibility flags and all kinds of combinations of the compatibility date flag values. I got a weird issue where it bundled things and made conflicting bundle names and that would crash my worker.

I tried using all of the various vite polyfill libraries or the installGlobals approach for my vite build config. It seemed to have no impact.

Things were looking dire and I felt like my goose was cooked. It seemed like there was literally nowhere in my app, at least that I could control, that I could change to fix the issue.

I ended up using the rollup-plugin-visualizer package to see what was making up the bulk of my bundle, and it was actually pretty enlightening.

I was using the Firebase SDK for app user authentication and it turns out it was the firebase/auth and firebase-admin libraries I was using that were the root of the issues I had. Having them as dependencies in my package.json was causing issues at build time, because those libraries depend on the built-in node libraries that throw the aforementioned "Could not resolve [some-library]" errors.

But also, beyond that, the SDK libraries are HUGE and make your bundle huge as well (FYI, the size limit for Cloudflare pages workers is 1MB on the free tier, 10MB on paid I think. My bundle was 15+ when using the nodejs_compat_v2 flag, wtf lol).

Luckily, it turns out that Firebase has an API for its authentication. So I converted all my calls to the SDK to use the API instead, which wasn't exactly a small feat, but soooo worth it.

This resulted in not having to bundle the problematic firebase libraries and not having to rely on the wrangler nodejs_compat flags, which allowed me to build successfully.

---

At any rate, I hope that anyone might find this helpful, even if for nothing other than to help reframe how you might approach the problem (use an API or non-built in alternative to built-in node libraries for cloudflare pages apps).

If nothing else the rollup-plugin-visualizer runs during your vite build and might help provide some insights.