global is not defined | Breaks HMR

[markus-gx]

Version

@nuxtjs/supabase: v1.0.2 nuxt: v3.6.5

Error

After installing Nuxt/supabase, the hot module reload breaks and in the dev console the following error appears:

Uncaught ReferenceError: global is not defined

Step to Reproduce

1. npx nuxi create <project-name>
2. yarn add -D @nuxtjs/supabase
3. Add Nuxt Config:

   
   // https://nuxt.com/docs/api/configuration/nuxt-config
   export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ['@nuxtjs/supabase'],
   supabase: {
   url: process.env.SUPABASE_URL,
   key: process.env.SUPABASE_KEY,
   serviceKey: process.env.SUPABASE_SERVICE_KEY,
   redirect: false, // disable global redirect to login page
   },
   })

5. `yarn dev`
6. Error appears in console

[markus-gx]

Seems the Demo application breaks too: https://github.com/nuxt-modules/supabase/tree/main/demo

[selemondev]

I've come across the identical issue, where both form validation and HMR are failing to function correctly.

[rickode1]

I was able to fix this by updating the nuxt.config.ts and installing axios

  vite: {
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: "globalThis",
        },
      },
    },
    resolve: {
      alias: {
        '@supabase/node-fetch': 'axios',
      },
    },
  },

[markus-gx]

I was able to fix this by updating the nuxt.config.ts and installing axios

  vite: {
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: "globalThis",
        },
      },
    },
    resolve: {
      alias: {
        '@supabase/node-fetch': 'axios',
      },
    },
  },

replaced axios with isomorphic-fetch and works like a charm. THANK YOU.

[rickode1]

I was able to fix this by updating the nuxt.config.ts and installing axios

  vite: {
    optimizeDeps: {
      esbuildOptions: {
        define: {
          global: "globalThis",
        },
      },
    },
    resolve: {
      alias: {
        '@supabase/node-fetch': 'axios',
      },
    },
  },

actually just this seems to be enough. The problem is in @supabase/node-fetch library

  vite: {
    resolve: {
      alias: {
        '@supabase/node-fetch': 'isomorphic-fetch',
      },
    },
  },

[selemondev]

It works ✨. Thank you @xkabr00 and @markus-gx .

[HilmiZul]

Seems the Demo application breaks too: https://github.com/nuxt-modules/supabase/tree/main/demo

Thank you 🔥