Prerendering fails when we use Nuxt content v2 with Nuxt 3

itszooper commented 1 year ago

Environment

Nuxt CLI v3.0.0-rc.4 11:15:44 RootDir: /Users/fayaz/Opensource/logspot 11:15:45 Nuxt project info: 11:15:45

Operating System: Darwin
Node Version: v16.13.1
Nuxt Version: 3.0.0-rc.4
Package Manager: yarn@1.22.19
Builder: vite
User Config: modules, content
Runtime Modules: @nuxtjs/tailwindcss@5.1.3, @nuxt/content@2.0.1
Build Modules: -

Reproduction

Open this stackblitz link - https://stackblitz.com/edit/nuxt-starter-hgwgav?file=app.vue

Install the dependencies - npm install
Run the dev server - npm run dev - you can see it runs fine

Stop and run npm run generate - You can see the error below

ERROR  'fetchContentNavigation' is not exported by virtual:nuxt:/home/projects/nuxt-starter-hgwgav/.nuxt/imports.mjs, imported by node_modules/@nuxt/content/dist/runtime/components/ContentNavigation.mjs

Describe the bug

I am using the useAsyncData in my setup script to retrieve data from content folder.

<script setup>
const { data: posts } = await useAsyncData('feed', () =>
  queryContent('/').find()
);
</script>

Additional context

Note, this is only happening when we use it with Nuxt content module. I created a different project without nuxt content and npm run generate worked without any issues.

Logs

ERROR  'fetchContentNavigation' is not exported by virtual:nuxt:/home/projects/nuxt-starter-hgwgav/.nuxt/imports.mjs, imported by node_modules/@nuxt/content/dist/runtime/components/ContentNavigation.mjs

itszooper commented 1 year ago

Did some digging around. Found out its related somewhere to this file node_modules/@nuxt/content/dist/runtime/components/ContentNavigation.mjs where it imports this method fetchContentNavigation(). @Tahul Any idea what to do here?

import { toRefs, defineComponent, h, useSlots } from "vue";
import { hash } from "ohash";
import { useAsyncData, fetchContentNavigation } from "#imports";
export default defineComponent({
  props: {
    query: {
      type: Object,
      required: false,
      default: void 0
    }
  },
  async setup(props) {
    const {
      query
    } = toRefs(props);
    const { data, refresh } = await useAsyncData(`content-navigation-${hash(query.value)}`, () => fetchContentNavigation(query.value));
    return {
      data,
      refresh
    };
  },
  render(ctx) {
    const slots = useSlots();
    const {
      query,
      data,
      refresh
    } = ctx;
    const emptyNode = (slot, data2) => h("pre", null, JSON.stringify({ message: "You should use slots with <ContentNavigation>", slot, data: data2 }, null, 2));
    if (slots?.empty && (!data || !data?.length)) {
      return slots?.empty?.({ query, ...this.$attrs }) || emptyNode("empty", { query, data });
    }
    return slots?.default ? slots.default({ navigation: data, refresh, ...this.$attrs }) : emptyNode("default", data);
  }
});

itszooper commented 1 year ago

@danielroe Could you please help me with this?

Completely lost as to why this is breaking. A hotfix until an official fix is released?