导致错误的原因是找不到名称“useSupabaseClient”。当使用 Nuxt 3 和 Supabase 时?

问题描述 投票:0回答:1

使用 npm 我已经安装了 Nuxt 3 和 Supabase,但在 vs code 中我不断收到以下错误;

Cannot find name 'useSupabaseClient'.

当我运行 npm run dev 时,我在浏览器的页面上收到以下错误消息;

500 
useSupabaseClient is not defined

at _sfc_main.setup (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\app.js:32:23)
at callWithErrorHandling (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:193:18)
at setupStatefulComponent (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7538:25)
at setupComponent (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7499:36)
at renderComponentVNode (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:642:15)
at Module.ssrRenderComponent (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:91:10)
at default (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\nuxt\dist\app\components\nuxt-root.js:76:37)
at Module.ssrRenderSuspense (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:489:5)
at _sfc_ssrRender (C:\Users\User\Desktop\New folder (3)\supabase_nuxt\node_modules\nuxt\dist\app\components\nuxt-root.js:67:25)

是什么原因导致这个问题?

以下是一些附加信息。

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/supabase": "^1.1.5",
    "nuxt": "^3.9.0",
    "vue": "^3.4.6",
    "vue-router": "^4.2.5"
  }
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/supabase'],
});

我的 .env 文件具有正确的 Supabase 凭据

.env

SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"

app.vue

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>
<script setup lang="ts">
const client = useSupabaseClient()
</script>

我做了以下事情;

  1. 确保 .env 中的 Supabase 凭据(如 Supabase 密钥和 url)正确。 2``将节点更新到当前版本,即 20.11.0。
  2. 使用 npm list @supabase/supabase-js 验证是否安装了 Supabase 客户端 命令。它显示以下内容;
@nuxtjs/[email protected]
  └── @supabase/[email protected]

4.重启开发服务器。

nuxt.js supabase supabase-database supabase-js
1个回答
0
投票

我遇到了类似的问题。

从脚本设置中删除打字稿后问题就消失了:

<script setup lang="ts">
const supabase = useSupabaseClient();

致:

<script setup>
const supabase = useSupabaseClient();

在尝试更好地理解这个问题以便我可以发布明智的答案时,我添加了 lang="ts" 回来,一切都继续工作。我的猜测是组件第一次没有正确接线。

© www.soinside.com 2019 - 2024. All rights reserved.