使用 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>
我做了以下事情;
@nuxtjs/[email protected]
└── @supabase/[email protected]
4.重启开发服务器。
我遇到了类似的问题。
从脚本设置中删除打字稿后问题就消失了:
<script setup lang="ts">
const supabase = useSupabaseClient();
致:
<script setup>
const supabase = useSupabaseClient();
在尝试更好地理解这个问题以便我可以发布明智的答案时,我添加了 lang="ts" 回来,一切都继续工作。我的猜测是组件第一次没有正确接线。