In my up to date shopify hydrogen/remix app, I am trying to import the supabase-js package into my server.ts or specific route. When I initialize the createClient function, then run the "shopify hydrogen dev --codegen" command, I get this error.

MiniOxygen couldn't load your app's entry point.
ReferenceError: exports is not defined
    at /@fs/home/xx/repos/root/node_modules/.pnpm/@supabase+postgrest-js@1.18.1/node_modules/@supabase/postgrest-js/dist/cjs/index.js?v=1f494df2:5:23
    at /@fs/home/xx/repos/root/node_modules/.pnpm/@supabase+postgrest-js@1.18.1/node_modules/@supabase/postgrest-js/dist/esm/wrapper.mjs?v=1f494df2:1:110
    at /@fs/home/xx/repos/root/node_modules/.pnpm/@supabase+supabase-js@2.48.1/node_modules/@supabase/supabase-js/dist/module/SupabaseClient.js?v=1f494df2:2:31

When I run the script for "npm run build && shopify hydrogen preview", it starts up and works without problem. The supabase-js client works as intended.

This is a snippet from my server.ts file where the client is called

import { createClient } from '@supabase/supabase-js'

/**
 * Export a fetch handler in module format.
 */
export default {
  async fetch(
    request: Request,
    env: Env,
    executionContext: ExecutionContext,
  ): Promise<Response> {
    try {
      /**
       * Open a cache instance in the worker and a custom session instance.
       */
      if (!env?.SESSION_SECRET) {
        throw new Error('SESSION_SECRET environment variable is not set');
      }

      const test = createClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY)

Versions:
 Node: >=20.0.0
 Vite: 5.4.14
 @shopify/hydrogen: 2024.10.1
 @shopify/mini-oxygen: 3.1.1
 @supabase/supabase-js: 2.48.1
 @supabase/postgrest-js: 1.18.1
 @remix-run/node: 2.15.3
 @remix-run/react: 2.15.3
 @remix-run/server-runtime: 2.15.3
 React: 18.3.1
 React-DOM: 18.3.1

Dependencies:
 @supabase/supabase-js: ^2.48.1
 @shopify/hydrogen: ^2024.10.1
 @shopify/mini-oxygen: ^3.1.1
 React: ^18.3.1
 @remix-run/react: ^2.15.3
 clsx: ^2.1.1
 component-folder: workspace:*
 graphql: ^16.10.0
 graphql-tag: ^2.12.6
 swiper: ^11.2.2
 tiny-invariant: ^1.3.3

Dev Dependencies:
 Vite: ^5.4.14
 @shopify/hydrogen-codegen: ^0.3.2
 @shopify/mini-oxygen: ^3.1.1
 @types/node: ^22.13.0
 eslint: ^8.57.1
 typescript: ^5.7.3
 prettier: ^3.4.2 

Scripts:
 dev: shopify hydrogen dev --codegen
 build: shopify hydrogen build --codegen --no-lockfile-check
 preview: npm run build && shopify hydrogen preview

Now I am stuck trying to wrap my head around why one would cause issues but the other does not. My first thought was perhaps it is related to the pnpm workspaces used in this monorepo. The structure is

root
|--working_folder
|    |--package.json
|    |--vite.config.ts
|--package.json

The error message indicates the package causing the problem is in the root folder's node_modules. But the supabase-js was installed in the working_folder dir. So that made me think maybe it's the vite.config.ts file causing an issue with bundling?

import path from 'path';

import {defineConfig} from 'vite';
import {hydrogen} from '@shopify/hydrogen/vite';
import {oxygen} from '@shopify/mini-oxygen/vite';
import {vitePlugin as remix} from '@remix-run/dev';
import tsconfigPaths from 'vite-tsconfig-paths';
import {flatRoutes} from 'remix-flat-routes';

export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.preset()],
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
      ignoredRouteFiles: ['**/*'],
      routes: async (defineRoutes) => {
        return flatRoutes(['routes'], defineRoutes);
      },
    }),
    tsconfigPaths(),
  ],
  ssr: {
    noExternal: [],
    optimizeDeps: {
      include: [
        'websocket',
        'fast-deep-equal/react',
        'typographic-base',
        'marked',
      ],
    },
  },
  optimizeDeps: {
    include: [
      'clsx',
      '@headlessui/react',
      'react-intersection-observer',
      'react-use/esm/useScroll',
      'react-use/esm/useDebounce',
      'react-use/esm/useWindowScroll',
      'remove-markdown',
    ],
    exclude: [],
  },
  build: {
    // Allow a strict Content-Security-Policy
    // withtout inlining assets as base64:
    assetsInlineLimit: 0,
  },
  resolve: {
    alias: {
      '@tailwindcss/vite': '@tailwindcss/vite/index.js',
      '~': path.resolve(__dirname, './app'),
    },
  },
});

If so, I'm a little perplexed why the build command would lead to a working page.

The other option could be the mini-oxygen workers not working with the supabase package. My understanding is that the workers are similar to cloudflare workers, which per supabase-js's README, says to include this code for compatibility.

import { createClient } from '@supabase/supabase-js'

// Provide a custom `fetch` implementation as an option
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key', {
  global: {
    fetch: (...args) => fetch(...args),
  },
})

This approach was also unsuccessful.

My current workaround is to make a fetch request to supabase without any imports. This isn't ideal for 2 reasons. The first is there are a number of conveniences to using their client, the second, and bigger concern is that this is an deeper issue with versioning or bundling.

Questions:

Is there an issue with how Vite handles @supabase/supabase-js or @supabase/postgrest-js during development in this worker setup?
How can I configure the environment (MiniOxygen vs Vite) to resolve the exports is not defined error?
Has anyone encountered this issue when using supabase-js in a worker environment (like MiniOxygen) and found a solution?
Is there anything in my Vite or worker configuration that might be causing this discrepancy?

Thank you very much for taking your time and providing any help!

Why would the Supabase client cause a MiniOxygen error with "dev" script but work with "preview" script?

Questions: