H
Hono2mo ago
Firu

Does Hono Cloudflare Pages work with `@supabase/supabase-js`?

Logs These were my errors on bun run dev, full logs attached.
9:21:29 PM [vite] Error when evaluating SSR module /node_modules/@supabase/node-fetch/lib/index.js:
|- ReferenceError: exports is not defined
at eval (C:/Users/LENOVO/my-hono-project/node_modules/@supabase/node-fetch/lib/index.js:5:23)
at instantiateModule (file:///C:/Users/LENOVO/my-hono-project/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:15)

9:21:29 PM [vite] Error when evaluating SSR module /node_modules/@supabase/postgrest-js/dist/module/PostgrestBuilder.js: failed to import "/node_modules/@supabase/node-fetch/lib/index.js"
|- ReferenceError: exports is not defined
at eval (C:/Users/LENOVO/my-hono-project/node_modules/@supabase/node-fetch/lib/index.js:5:23)
at instantiateModule (file:///C:/Users/LENOVO/my-hono-project/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:15)

9:21:29 PM [vite] Error when evaluating SSR module /node_modules/@supabase/postgrest-js/dist/module/PostgrestTransformBuilder.js: failed to
import "/node_modules/@supabase/postgrest-js/dist/module/PostgrestBuilder.js"
|- ReferenceError: exports is not defined
at eval (C:/Users/LENOVO/my-hono-project/node_modules/@supabase/node-fetch/lib/index.js:5:23)
at instantiateModule (file:///C:/Users/LENOVO/my-hono-project/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:15)

9:21:29 PM [vite] Error when evaluating SSR module /node_modules/@supabase/postgrest-js/dist/module/PostgrestFilterBuilder.js: failed to import "/node_modules/@supabase/postgrest-js/dist/module/PostgrestTransformBuilder.js"
|- ReferenceError: exports is not defined
at eval (C:/Users/LENOVO/my-hono-project/node_modules/@supabase/node-fetch/lib/index.js:5:23)
at instantiateModule (file:///C:/Users/LENOVO/my-hono-project/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:15)
# many more
9:21:29 PM [vite] Error when evaluating SSR module /node_modules/@supabase/node-fetch/lib/index.js:
|- ReferenceError: exports is not defined
at eval (C:/Users/LENOVO/my-hono-project/node_modules/@supabase/node-fetch/lib/index.js:5:23)
at instantiateModule (file:///C:/Users/LENOVO/my-hono-project/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:15)

9:21:29 PM [vite] Error when evaluating SSR module /node_modules/@supabase/postgrest-js/dist/module/PostgrestBuilder.js: failed to import "/node_modules/@supabase/node-fetch/lib/index.js"
|- ReferenceError: exports is not defined
at eval (C:/Users/LENOVO/my-hono-project/node_modules/@supabase/node-fetch/lib/index.js:5:23)
at instantiateModule (file:///C:/Users/LENOVO/my-hono-project/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:15)

9:21:29 PM [vite] Error when evaluating SSR module /node_modules/@supabase/postgrest-js/dist/module/PostgrestTransformBuilder.js: failed to
import "/node_modules/@supabase/postgrest-js/dist/module/PostgrestBuilder.js"
|- ReferenceError: exports is not defined
at eval (C:/Users/LENOVO/my-hono-project/node_modules/@supabase/node-fetch/lib/index.js:5:23)
at instantiateModule (file:///C:/Users/LENOVO/my-hono-project/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:15)

9:21:29 PM [vite] Error when evaluating SSR module /node_modules/@supabase/postgrest-js/dist/module/PostgrestFilterBuilder.js: failed to import "/node_modules/@supabase/postgrest-js/dist/module/PostgrestTransformBuilder.js"
|- ReferenceError: exports is not defined
at eval (C:/Users/LENOVO/my-hono-project/node_modules/@supabase/node-fetch/lib/index.js:5:23)
at instantiateModule (file:///C:/Users/LENOVO/my-hono-project/node_modules/vite/dist/node/chunks/dep-G-px366b.js:54758:15)
# many more
Code Check it: https://github.com/Luzefiru/netzwelt-ats/blob/feat/supabase-integration/vite.config.ts
14 Replies
Firu
Firu2mo ago
I was able to use Supabase before with Hono in a small project, but without vite and simply served the files & ran the app via wrangler.
"scripts": {
"build:css": "tailwindcss -i ./public/style.css -o ./dist/_tailwind.css",
"dev:css": "npm run build:css -- --watch",
"dev:server": "wrangler dev src/index.tsx --assets dist --live-reload -e dev",
"dev": "concurrently \"npm:dev:*\"",
"deploy": "npm run build:css && wrangler deploy --minify src/index.tsx --assets dist"
},
"scripts": {
"build:css": "tailwindcss -i ./public/style.css -o ./dist/_tailwind.css",
"dev:css": "npm run build:css -- --watch",
"dev:server": "wrangler dev src/index.tsx --assets dist --live-reload -e dev",
"dev": "concurrently \"npm:dev:*\"",
"deploy": "npm run build:css && wrangler deploy --minify src/index.tsx --assets dist"
},
I'm guessing it's because Supabase uses nodejs modules and it's not compatible with the Cloudflare Pages runtime environment.
Nico
Nico2mo ago
It says it’s compatible with workers
Nico
Nico2mo ago
Cloudflare Docs
Supabase · Cloudflare Workers docs
Supabase is an open source Firebase alternative and a PostgreSQL database service that offers real-time functionality, database backups, and …
Nico
Nico2mo ago
Supabase
CloudFlare Workers | Works With Supabase
Using Supabase from your Cloudflare Workers just got even easier.
ex0ns
ex0ns2mo ago
Side note (about workers): the last release of supabase-js/supabase-auth seems to have some issues when running inside the workers: https://github.com/supabase/supabase-js/issues/1001#issuecomment-2029478541 Using a previous version "just works". This is not directly related to your question about Cloudflare Pages (I can't answer this part), but beware if you try to use cloudflare workers at the moment
GitHub
The 'cache' field on 'RequestInitializerDict' is not implemented - ...
Bug report I confirm this is a bug with Supabase, not with my own application. I confirm I have searched the Docs, GitHub Discussions, and Discord. Describe the bug When using the following method ...
Firu
Firu2mo ago
Yeah, it does work with workers. The issue only happens once I introduce the pages() honojs/vite-plugins/cloudflare-pages plugin. Here are my minimal repros for this: Hono Workers Template + Supabase | Worker /tasks Route Hono Pages Template + Supabase | Pages /tasks Route thanks for the heads up! i'll explore this once I implement auth later down the line oh yup, even if you do not use the /supabase-auth module, it throws the error with wrangler
Firu
Firu2mo ago
No description
ex0ns
ex0ns2mo ago
Yup, see the comments in the issue I've linked, there is a workaround described, I hope this will get fixed soon, this sucks
Firu
Firu2mo ago
I found a workaround for this. I ditched Vite in favor of manually using ESBuild / bun to bundle the server entry script into a _worker.js then serve static files following a similar approach to this tutorial on the Cloudflare Docs: https://developers.cloudflare.com/pages/framework-guides/deploy-a-hono-site/
Cloudflare Docs
Deploy a Hono site · Cloudflare Pages docs
Hono is a small, simple, and ultrafast web framework for Cloudflare Pages and Workers, Deno, and Bun. In this guide, you will create a new Hono …
Firu
Firu2mo ago
thank you @Alex Kontos for pointing me to the right direction
Alex Kontos
Alex Kontos2mo ago
NP!
ex0ns
ex0ns2mo ago
so you bypassed wrangler as well ? going directly with esbuild to bundle the worker ?
Firu
Firu2mo ago
I use wrangler for the development preview & the deployment scripts
{
"scripts": {
"prebuild": "shx rm -fr dist && shx mkdir -p dist && shx cp -ur 'public' 'dist/static'",
"build:css": "tailwindcss -i ./app/client/style.css -o ./dist/static/styles/style.css",
"build:scripts": "esbuild ./app/client/scripts/*.ts --outdir=./dist/static/scripts --minify --bundle",
"build:server": "esbuild --bundle app/server/index.tsx --format=esm --outfile=dist/_worker.js",
"dev:css": "bun run build:css -- --watch",
"dev:server": "bun run build:server -- --watch",
"dev:scripts": "bun run build:scripts -- --watch",
"dev:wrangler": "wrangler pages dev dist --live-reload",
"dev": "bun run prebuild && concurrently \"bun:dev:*\"",
"build": "concurrently \"bun:build:*\"",
"deploy": "bun run prebuild && bun run build && wrangler pages deploy dist"
},
{
"scripts": {
"prebuild": "shx rm -fr dist && shx mkdir -p dist && shx cp -ur 'public' 'dist/static'",
"build:css": "tailwindcss -i ./app/client/style.css -o ./dist/static/styles/style.css",
"build:scripts": "esbuild ./app/client/scripts/*.ts --outdir=./dist/static/scripts --minify --bundle",
"build:server": "esbuild --bundle app/server/index.tsx --format=esm --outfile=dist/_worker.js",
"dev:css": "bun run build:css -- --watch",
"dev:server": "bun run build:server -- --watch",
"dev:scripts": "bun run build:scripts -- --watch",
"dev:wrangler": "wrangler pages dev dist --live-reload",
"dev": "bun run prebuild && concurrently \"bun:dev:*\"",
"build": "concurrently \"bun:build:*\"",
"deploy": "bun run prebuild && bun run build && wrangler pages deploy dist"
},
ex0ns
ex0ns2mo ago
Thanks !