添加nuxt-toc组件后出现queryContent导入失败的500错误求助

错误核心信息 #

plugin:nuxt:imports-transform unimport failed to find "queryContent" imported from "#imports"

完整报错详情 #

H3Error: [vite-node] [plugin:nuxt:imports-transform] [VITE_ERROR] /node_modules/nuxt-toc/dist/runtime/components/CustomQuery.vue

import { hash } from 'ohash' import { toRefs, defineComponent, h, useSlots, watch } from 'vue' import { computed, useAsyncData, queryContent } from '#imports'

（省略后续组件代码，核心为nuxt-toc的CustomQuery.vue组件尝试从#imports导入queryContent失败）

相关代码 #

slug页面代码 #

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})
</script>

<template>
  <ContentRenderer v-if="page" :value="page" />
  <TableOfContents :toc="data.body.toc" />
</template>

Nuxt配置文件 #

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['@nuxt/content', '@nuxtjs/tailwindcss', 'nuxt-toc'],
  tailwindcss: {
    // Options
  },
  content: {
    build: {
      markdown: {
        toc: {
          depth: 2, // include h3 headings
        }
      }
    }
  }
})

已尝试的解决方法 #

• 重新安装npm依赖
• 全新搭建Nuxt项目并复制相同配置，问题仍复现

解决建议 #

1. 升级依赖版本
   确认nuxt-toc版本适配当前Nuxt 3（compatibilityDate对应3.13+）及@nuxt/content版本，执行升级命令：

   npm install nuxt-toc@latest
   

2. 手动配置自动导入
   在nuxt.config.ts中手动声明queryContent的自动导入规则，确保Nuxt能识别该方法：

   export default defineNuxtConfig({
     // ...其他配置
     imports: {
       presets: [
         {
           from: '@nuxt/content',
           imports: ['queryContent']
         }
       ]
     }
   })
   

3. 直接渲染TOC数据（绕过nuxt-toc）
   利用@nuxt/content已生成的toc数据手动渲染目录，无需依赖第三方组件：

   <template>
     <ContentRenderer v-if="page" :value="page" />
     <div class="toc">
       <ul>
         <li v-for="item in page.body.toc" :key="item.id">
           <a :href="`#${item.id}`">{{ item.text }}</a>
           <ul v-if="item.children">
             <li v-for="child in item.children" :key="child.id">
               <a :href="`#${child.id}`">{{ child.text }}</a>
             </li>
           </ul>
         </li>
       </ul>
     </div>
   </template>
   

4. 禁用nuxt-toc内置查询
   查看nuxt-toc官方文档，确认是否有配置项可跳过内部CustomQuery组件，直接传入已有的toc数据。

内容的提问来源于stack exchange，提问作者Mike Frost