Nuxt3中NuxtErrorBoundary报错el.hasAttribute is not a function的排查与解决

1. 正确使用<NuxtErrorBoundary>渲染回退内容的方法 #

你当前的核心问题是未正确使用NuxtErrorBoundary的命名插槽。Nuxt3的<NuxtErrorBoundary>要求错误回退内容必须放在#error命名插槽中，而非直接放置无命名的<template>。

修改pages/index.vue代码如下：

<template>
  <div>
    <NuxtErrorBoundary>
      <!-- 默认插槽：正常状态下渲染的内容 -->
      <UserCard />
      <!-- #error 插槽：捕获错误后显示的回退内容 -->
      <template #error>
        An error happened.
      </template>
    </NuxtErrorBoundary>
  </div>
</template>

若需要在回退内容中访问具体错误信息，还可以通过插槽参数获取：

<template #error="{ error }">
  An error happened: {{ error.message }}
</template>

2. "el.hasAttribute is not a function"错误的原因及修复 #

这个错误的根源是你在<NuxtErrorBoundary>内使用了无命名的<template>。NuxtErrorBoundary的内部逻辑会尝试处理默认插槽内的元素，而无命名<template>会被错误识别为普通DOM元素处理，导致调用hasAttribute方法时出错（Vue编译后<template>的处理逻辑和普通DOM元素不同）。

只要按照上述方法，将回退内容放到#error命名插槽中，该错误就会自动消失。

内容的提问来源于stack exchange，提问作者Mostafa Aourik