Hono•4mo ago

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

message.txt

14 Replies

Firu•4mo 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•4mo ago

It says it’s compatible with workers

Nico•4mo ago

https://developers.cloudflare.com/workers/databases/native-integrations/supabase/

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•4mo ago

https://supabase.com/partners/integrations/cloudflare-workers

Supabase

CloudFlare Workers | Works With Supabase

Using Supabase from your Cloudflare Workers just got even easier.

ex0ns•4mo 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•4mo 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•4mo ago

ex0ns•4mo 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•4mo 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•4mo ago

thank you @Alex Kontos for pointing me to the right direction

Alex Kontos•4mo ago

NP!

ex0ns•4mo ago

so you bypassed wrangler as well ? going directly with esbuild to bundle the worker ?

Firu•4mo 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•4mo ago

Thanks !

Gaming

Programming

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