如何将Supabase与新版Nuxt连接？遇默认导出错误求助

问题描述 #

连接Supabase与新版Nuxt时出现以下错误：

Uncaught SyntaxError: The requested module 'http://localhost:3001/_nuxt/@fs/home/bobak/codehub/nuxt-mastering/node_modules/.pnpm/@supabase+postgrest-js@1.16.3/node_modules/@supabase/postgrest-js/dist/cjs/index.js?v=25186966' doesn't provide an export named: 'default'

当前Nuxt配置如下：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ['@nuxtjs/supabase','@nuxt/ui', '@nuxtjs/google-fonts',],
  
  googleFonts: {
    families: {
      Poppins: [400, 500, 700]
    }
  },
  supabase: {
    redirectOptions: {
      login: 'auth/login',
      callback: '',
      exclude: ['/auth/*']
    }
  },
  app: {
    head: {
      title: 'Bobak News'
    }
  }
})

解决方案 #

1. 升级@nuxtjs/supabase模块 #

错误根源在于@supabase/postgrest-js v1.16.3的CommonJS格式与Nuxt 3的ES模块体系不兼容，且该版本无默认导出。升级@nuxtjs/supabase到最新版，会自动同步依赖的Supabase相关包到兼容版本：

pnpm upgrade @nuxtjs/supabase --latest

2. 清除缓存并重启服务 #

清理Nuxt缓存和pnpm模块缓存，避免旧版本残留：

pnpm nuxt clean && pnpm dev

3. 修正代码中的导入方式（若存在） #

如果你的业务代码中直接导入了@supabase/postgrest-js，确保使用命名导入而非默认导入：
错误示例：

import postgrest from '@supabase/postgrest-js'

正确示例：

import { PostgrestClient } from '@supabase/postgrest-js'

内容的提问来源于stack exchange，提问作者Kelvin Mutuota