Does Supabase work in Hono + Cloudflare Pages?

[Luzefiru]

Context

I'm in the process of integrating Supabase into my Hono on Cloudflare Pages project and came across issues when running wrangler dev dist and vite.

I thought it would integrate nicely since I already created a PoC project using Supabase with Hono, but it seems that I'm using it in a worker, without the Hono Vite plugins for Cloudflare Pages.

When I made a new project with the Cloudflare Pages Hono template, integrating Supabase throws errors when bundling the worker. You can check the branch and build it yourself here: Luzefiru/netzwelt-ats.

I'm guessing it's because the Supabase modules uses nodejs libraries and it's not compatible with the Cloudflare Pages runtime environment that it tries to build.

Any help or ideas would be much appreciated.

What I've tried:

• restarting my PC
• clearing my vite cache
• removing & reinstalling node_modules with bun and npm
• manually changing the _worker.js source code to rename the imports to prefix node modules with node:[MODULE] as per Cloudflare docs and this Cloudflare Community post and adding the nodejs_compat flag to my wrangler.toml like compatibility_flags = [ "nodejs_compat" ].

Error Logs

bun run dev Logs

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)

9:21:29 PM [vite] Error when evaluating SSR module /node_modules/@supabase/postgrest-js/dist/module/PostgrestQueryBuilder.js: failed to import "/node_modules/@supabase/postgrest-js/dist/module/PostgrestFilterBuilder.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/PostgrestClient.js: failed to import "/node_modules/@supabase/postgrest-js/dist/module/PostgrestQueryBuilder.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/index.js: failed to import "/node_modules/@supabase/postgrest-js/dist/module/PostgrestClient.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/supabase-js/dist/module/SupabaseClient.js: failed to import "/node_modules/@supabase/postgrest-js/dist/module/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/supabase-js/dist/module/index.js: failed to import "/node_modules/@supabase/supabase-js/dist/module/SupabaseClient.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/ssr/dist/index.mjs: failed to import "/node_modules/@supabase/supabase-js/dist/module/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 /app/server/middleware/supabase.tsx: failed to import "/node_modules/@supabase/ssr/dist/index.mjs"
|- 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 app/server/index.tsx: failed to import "/app/server/middleware/supabase.tsx"
|- 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] Internal server error: 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)

bun run deploy Logs

$ bun run deploy $ bun run build && wrangler pages deploy dist $ vite build --mode bundle && vite build vite v5.1.5 building for bundle... transforming (25) node_modules\@editorjs\marker\dist\marker.mjs 🌼 daisyUI 4.7.2 ├─ ✔︎ 2 themes added https://daisyui.com/docs/themes ╰─ ★ Star daisyUI on GitHub https://github.com/saadeghi/daisyui

node_modules/htmx.org/dist/htmx.min.js (1:5388) Use of eval in "node_modules/htmx.org/dist/htmx.min.js" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 42 modules transformed.
dist/static/style.css 344.31 kB │ gzip: 44.33 kB
dist/assets/_commonjsHelpers-Cpj98o6Y.js 0.24 kB │ gzip: 0.18 kB
dist/static/scripts/editor.js 3.40 kB │ gzip: 1.54 kB
dist/static/scripts/main.js 424.43 kB │ gzip: 118.98 kB
✓ built in 48.18s
vite v5.1.5 building SSR bundle for production...
✓ 858 modules transformed.
dist/assets/wrapper-BHruGobL.js 37.50 kB
dist/_worker.js 552.01 kB
✓ built in 2.62s
🌎 Uploading... (10/10)

✨ Success! Uploaded 1 files (9 already uploaded) (3.63 sec)

X [ERROR] 14 error(s) and 1 warning(s) when compiling Worker.

X [ERROR] Could not resolve "stream"

_worker.js:1:14:
  1 │ import Fi from"stream";import zi from"http";import Hi from"url";imp...
    ╵               ~~~~~~~~

The package "stream" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "http"

_worker.js:1:37:
  1 │ ...i from"stream";import zi from"http";import Hi from"url";import B...
    ╵                                 ~~~~~~

The package "http" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "url"

_worker.js:1:58:
  1 │ ...t zi from"http";import Hi from"url";import Bd from"punycode";imp...
    ╵                                  ~~~~~

The package "url" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "https"

_worker.js:1:103:
  1 │ ...from"punycode";import Zi from"https";import qi from"zlib";functi...
    ╵                                 ~~~~~~~

The package "https" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "zlib"

_worker.js:1:125:
  1 │ ...Zi from"https";import qi from"zlib";function Wi(t,e){for(var a=0...
    ╵                                 ~~~~~~

The package "zlib" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "stream"

assets/wrapper-BHruGobL.js:1:14:
  1 │ import st from"stream";import rt from"zlib";import{g as We,a as it}...
    ╵               ~~~~~~~~

The package "stream" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "zlib"

assets/wrapper-BHruGobL.js:1:37:
  1 │ ...t from"stream";import rt from"zlib";import{g as We,a as it}from"...
    ╵                                 ~~~~~~

The package "zlib" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "buffer"

assets/wrapper-BHruGobL.js:1:101:
  1 │ ..../_worker.js";import nt from"buffer";import Ge from"crypto";impo...
    ╵                                ~~~~~~~~

The package "buffer" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "crypto"

assets/wrapper-BHruGobL.js:1:124:
  1 │ ... from"buffer";import Ge from"crypto";import ot from"events";impo...
    ╵                                ~~~~~~~~

The package "crypto" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "https"

assets/wrapper-BHruGobL.js:1:170:
  1 │ ...t from"events";import at from"https";import ft from"http";import...
    ╵                                 ~~~~~~~

The package "https" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "http"

assets/wrapper-BHruGobL.js:1:192:
  1 │ ...at from"https";import ft from"http";import lt from"net";import h...
    ╵                                 ~~~~~~

The package "http" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "net"

assets/wrapper-BHruGobL.js:1:213:
  1 │ ...t ft from"http";import lt from"net";import ht from"tls";import c...
    ╵                                  ~~~~~

The package "net" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "tls"

assets/wrapper-BHruGobL.js:1:233:
  1 │ ...rt lt from"net";import ht from"tls";import ct from"url";import"p...
    ╵                                  ~~~~~

The package "tls" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

X [ERROR] Could not resolve "url"

assets/wrapper-BHruGobL.js:1:253:
  1 │ ...rt ht from"tls";import ct from"url";import"punycode";var X={expo...
    ╵                                  ~~~~~

The package "url" wasn't found on the file system but is built into node.
Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

▲ [WARNING] Comparison with -0 using the "===" operator will also match 0 [equals-negative-zero]

_worker.js:1:34138:
  1 │ ...igned){if(l<0)l+=i;else if(l===-0)return 0}return l}}de.void=fun...
    ╵                                   ~~

Floating-point equality is defined such that 0 and -0 are equal, so "x === -0" returns true for both 0 and -0. You need to use "Object.is(x, -0)" instead to test for -0.

X [ERROR] Build failed with 14 errors:

_worker.js:1:14: ERROR: Could not resolve "stream"
_worker.js:1:37: ERROR: Could not resolve "http"
_worker.js:1:58: ERROR: Could not resolve "url"
_worker.js:1:103: ERROR: Could not resolve "https"
_worker.js:1:125: ERROR: Could not resolve "zlib"
...

🪵 Logs were written to "C:\Users\LENOVO.wrangler\logs\wrangler-2024-04-02_13-45-45_092.log"
error: script "deploy" exited with code 1

[yusukebe]

Hi @Luzefiru !

Maybe you should add some dependencies to ssr.external in vite.config.ts. Try this:

export default defineConfig(({ mode }) => {
  //...
    return {
      ...globalConfig,
      ssr: {
        external: ['@supabase/ssr'] // <=== Add this
      },
      ///...
})

[Luzefiru]

I added this to my config and now, my dev and preview scripts work correctly. However, when I deploy, the build succeeds, but it throws an Internal Server Error when I navigate to the website.

I tried to do wrangler tail PROJECT_NAME to check the logs, but an error is thrown:

 wrangler tail MY_PROJECT
 ⛅️ wrangler 3.26.0 (update available 3.48.0)
-------------------------------------------------------

X [ERROR] A request to the Cloudflare API (/accounts/BIG_HASH/workers/scripts/MY_PROJECT/bindings) failed.

  workers.api.error.script_not_found [code: 10007]

  If you think this is a bug, please open an issue at:
  https://github.com/cloudflare/workers-sdk/issues/new/choose

How does ssr.external work? I'll try to reconfigure my application to make it work.

[Luzefiru]

Whoops, I needed to add my environment variables inside the Cloudflare Pages Project Dashboard because I created a new project for testing. Thanks @yusukebe!