NuxtJS 3页面切换时出现parentNode相关TypeError错误求助

先查Supabase相关的DOM操作 #

这个错误基本是组件卸载后仍在访问DOM元素导致的，结合你使用了Supabase模块，重点关注以下几点：

• 如果你用到了Supabase的Auth组件或其他UI组件，确认组件卸载时是否清理了DOM监听和相关引用。比如在onUnmounted钩子中手动取消绑定事件、释放DOM引用。
• 避免在async setup的异步逻辑中直接操作DOM，必须确保目标元素存在后再执行相关代码。

试试禁用页面预渲染/调整过渡模式 #

Nuxt的预加载机制有时会导致DOM节点状态异常，临时修改配置测试：
在nuxt.config.ts中添加：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      enabled: false
    }
  },
  app: {
    pageTransition: { mode: 'out-in' }
  }
})

out-in模式会保证旧页面完全卸载后再渲染新页面，避免DOM节点重叠引发的问题。

升级Supabase模块到最新版 #

你当前使用的@nuxtjs/supabase@1.1.6可能存在已知的DOM泄漏问题，直接升级到最新稳定版：

npm install @nuxtjs/supabase@latest

升级后清理旧依赖并重新安装：

rm -rf node_modules package-lock.json
npm install

排查自定义指令或第三方库 #

如果你写了自定义指令或引入了其他第三方UI库，检查这些代码是否在组件卸载后仍持有DOM引用：

• 自定义指令要在unmounted钩子中正确解绑事件、清理DOM引用。
• 可以临时移除第三方库，观察错误是否消失，逐步定位问题源。

用nextTick确保DOM就绪 #

如果必须在异步逻辑中操作DOM，使用nextTick等待DOM更新完成后再执行：

<script setup>
import { nextTick, onMounted } from 'vue'

onMounted(async () => {
  await nextTick()
  // 此处编写DOM操作代码
})
</script>

内容的提问来源于stack exchange，提问作者Nizami Suleymanov