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'const sfc_main = defineComponent({ name: 'CustomQuery', props: { /** * The path of the content to load from content source. / path: { type: String, required: false, default: void 0, }, /* * Select a subset of fields / only: { type: Array, required: false, default: void 0, }, /* * Remove a subset of fields / without: { type: Array, required: false, default: void 0, }, /* * Filter results / where: { type: Object, required: false, default: void 0, }, /* * Sort results / sort: { type: Object, required: false, default: void 0, }, /* * Limit number of results / limit: { type: Number, required: false, default: void 0, }, /* * Skip number of results / skip: { type: Number, required: false, default: void 0, }, /* * Filter contents based on locale / locale: { type: String, required: false, default: void 0, }, /* * A type of query to be made. */ find: { type: String, required: false, default: void 0, }, }, async setup(props) { const { path, only, without, where, sort, limit, skip, locale, find, } = toRefs(props) const isPartial = computed(() => path.value?.includes('/')) watch(() => props, () => refresh(), { deep: true }) const { data, refresh } = await useAsyncData(
content-query-${hash(props)}, () => { let queryBuilder if (path.value) { queryBuilder = queryContent(path.value) } else { queryBuilder = queryContent() } if (only.value) { queryBuilder = queryBuilder.only(only.value) } if (without.value) { queryBuilder = queryBuilder.without(without.value) } if (where.value) { queryBuilder = queryBuilder.where(where.value) } if (sort.value) { queryBuilder = queryBuilder.sort(sort.value) } if (limit.value) { queryBuilder = queryBuilder.limit(limit.value) } if (skip.value) { queryBuilder = queryBuilder.skip(skip.value) } if (locale.value) { queryBuilder = queryBuilder.where({ _locale: locale.value }) } if (find.value === 'one') { return queryBuilder.findOne() } if (find.value === 'surround') { if (!path.value) { console.warn('[Content] Surround queries requirespathprop to be set.') console.warn('[Content] Query withoutpathwill return regularfind()results.') return queryBuilder.find() } return queryBuilder.findSurround(path.value) } return queryBuilder.find() }, ) return { isPartial, data, refresh, } }, /** * Content not found fallback * @slot not-found */ render(ctx) { const slots = useSlots() const { // Setup data, refresh, isPartial, // Props path, only, without, where, sort, limit, skip, locale, find, } = ctx const props = { path, only, without, where, sort, limit, skip, locale, find, } if (props.find === 'one') { if (!data && slots?.['not-found']) { return slots['not-found']({ props, ...this.$attrs }) } if (slots?.empty && data?._type === 'markdown' && !data?.body?.children.length) { return slots.empty({ props, ...this.$attrs }) } } else if (!data || !data.length) { if (slots?.['not-found']) { return slots['not-found']({ props, ...this.$attrs }) } } if (slots?.default) { return slots.default({ data, refresh, isPartial, props, ...this.$attrs }) } const emptyNode = (slot, data2) => h('pre', null, JSON.stringify({ message: 'You should use slots with <ContentQuery>!', slot, data: data2 }, null, 2)) return emptyNode('default', { data, props, isPartial }) }, })import { useSSRContext as __vite_useSSRContext } from 'vue' const _sfc_setup = _sfc_main.setup _sfc_main.setup = (props, ctx) => { const ssrContext = __vite_useSSRContext() ;(ssrContext.modules || (ssrContext.modules = new Set())).add("node_modules/nuxt-toc/dist/runtime/components/CustomQuery.vue") return _sfc_setup ? _sfc_setup(props, ctx) : undefined } import _export_sfc from '
In my slug file
<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>
when I add TOC tag, it's throwing that 500 error
I don't know How to fix it
-I've reinstalled npm, -fresh installed new nuxt nothing worked
in my Nuxt config File
// 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
}
}
}
}
})
