When navigating to nuxt content page I get "You should use slots with <ContentRenderer>"

[SleepiestAdam]

Environment

• Operating System: Darwin
• Node Version: v20.3.1
• Nuxt Version: 3.6.1
• Nitro Version: 2.5.2
• Package Manager: [email protected]
• Builder: vite
• User Config: ssr, fontsPath, modules, i18n, router, delayHydration, routeRules, hooks, schemaOrg, image, content, css, googleFonts, alias, app, plugins, webpack, sitemap
• Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @pinia/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected], [email protected], [email protected], @funken-studio/[email protected], @vueuse/motion/[email protected], [email protected]
• Build Modules: -

Reproduction

Fairly obvious, seems to have been reported by others in the last day. Nothing fancy going on on either of the pages with the bug in question. e.g. https://github.com/nuxt/content/issues/1154#issuecomment-1607119705

It only appears to occur when deployed, when running npm run dev - all seems to work fine.

Describe the bug

When navigating to a page that uses Nuxt Content after deployment - if you go directly to the page via a url then it loads fine, but if you navigate to the page from like a blog root or something then it shows. Happening with the latest nuxt (3.6.1) and latest nuxt-content (2.7.0):

{ "message": "You should use slots with <ContentRenderer>", ... }

Example Reproduction

Note: I've changed the links from NuxtLink > a to negate the issues for our users, so these are screenshots from before this hacky temporary fix was added.

When going directly to the post at https://www.sleepiest.com/blog/the-science-of-sleep/how-sleep-and-allergies-interact:

When navigating to the post from say https://www.sleepiest.com/blog and clicking on the first post is when the bug arises:

Additional context

No response

Logs

No response

[SleepiestAdam]

I've narrowed the issue down to:

const { data } = await useAsyncData(content-${route.path}, () => { return queryContent().where({ _path: route.path }).findOne(); });

Returning an array with absolutely all the content rather than the singular bit of content that was requests. This is also replicated on other pages where it's filtering by category - in some instances it doesn't - instead displaying all content. Almost like when rendered on the client it's just ignoring everything apart from "queryContent()".

This appears to only occur when the page is loaded by the client. When I navigate directly to the page in question it all works as expected (as in screenshots above).

[riderx]

I have the same issue... I'm willing to support nuxt to get this fixed @Atinux my business SEO depend on this

[atinux]

It might happen when there is a new redeploy and you are navigating on client-side, can you confirm?

[cossssmin]

EDIT: fixed by running nuxt generate instead.

Having this same issue, with both <ContentRenderer /> and <ContentList /> when running nuxt build, can be seen on the homepage here for the code blocks and the "Maizzle Guides" section towards the end:

https://deploy-preview-136--maizzle-docs.netlify.app/

Of course, it all works fine when developing locally.

Reproduction

See this PR: https://github.com/maizzle/maizzle.com/pull/136

And this particular commit: maizzle/maizzle.com@48404cb (#136)

ContentRenderer

Code used (copied from docs page):

<ContentQuery path="code/environment" find="one" v-slot="{ data }">
  <ContentRenderer :value="data" />
</ContentQuery>

But this doesn't work either:

<ContentQuery path="code/environment" find="one">
  <template #default="{ data }">
    <ContentRenderer :value="data" />
  </template>
</ContentQuery>

code/environment is just a .md file with a fenced code block in it:

	```js
	module.exports = {
	  build: {
	    templates: {
	      source: 'src/templates',
	      destination: {
	        path: 'build_production',
	        extension: 'html',
	      },
	      assets: {
	        source: 'src/images',
	        destination: 'images',
	      },
	    },
	  }
	}
	```

Result:

ContentList

Code used (also copied from docs page):

<ContentList :query="guides" v-slot="{ list }">
  <div
    v-for="guide in list"
    :key="guide.title"
  >
    ...
  </div>
</ContentList>

But this doesn't work either:

<ContentList :query="guides">
  <template #default="{ list }">
    <div
      v-for="guide in list"
      :key="guide.title"
    >
		...
    </div>
  </template>
</ContentList>

Result:

System info

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.12.1
- Nuxt Version:     3.6.5
- Nitro Version:    2.5.2
- Package Manager:  [email protected]
- Builder:          vite
- User Config:      content, css, experimental, modules, postcss, nitro, runtimeConfig, spaLoadingTemplate, typescript
- Runtime Modules:  [email protected], ./modules/routes-list, ./modules/docs-navigation, ./modules/github-release, ./modules/shiki/shiki-custom, @nuxt/[email protected]
- Build Modules:    -
------------------------------

[riderx]

@Atinux it's 100% of the time for me :/ i use netlify edge, maybe that can help

[riderx]

with the last change i made, (disable cloudflare optimization as suggessted in the doc and discord) i have now infinite loading here: https://capgo.app/blog/ i also tried to make my own endpoint instead of the one from nuxt content but with no luck.

[riderx]

On my side i managed to fix partially the issue. by disabling the netlify-edge preset. Now if i clean cache i don't have issue and can navigate to list and one blog article. But after the app cache is fully feed the navigation is dead.

How to reproduce: go to https://capgo.app ( 12.4 mb cache) or https://captime.app (2.4 mb cache)

open console and empty cache Reload page ang click fast to blog and first article. It should display wait the cache fully loaded. Go home again and do same path blog article will redirect home

https://github.com/nuxt/content/assets/4084527/2cecb278-3189-4c89-91d4-66acd3a5772c

It seems if I disable PWA config (who never change since a year) It fixes the loading issue, this issue looks to have so many implications :/

[Sailsnake-studio]

Im also running into the same issue. Switched to Decap CMS, so my files are in markdown and i cant seem to find a way to render the markdown bit properly. Rendering the string is not an issue offcourse, but when using <ContentRenderer /> i get the "you should use slots" error. This happens in dev and generated mode.

Examples:

const md = "#testing a string"

<ContenRenderer :value="md" />
// returns: "You should use slots with <ContentRenderer>"

<ContenRendererMarkdown :value="md" />
// returns: "Cannot read properties of undefined (reading 'replace')"

package.json:

    "@nuxt/content": "^2.8.2",
    "@types/node": "^18",
    "nuxt": "^3.7.1",

[james-tyner]

I have this same issue with a <ContentList> when deployed on Netlify. It works properly when testing locally. My site is being built using the nuxi generate command with Node 18.17.1 and npm 9.6.7.

[atinux]

Does it happen when you navigate on client-side and a new generate has been deployed in-between?

[riderx]

@Atinux for me that was always happening, no matter the env even in local dev

[cowboyxup]

I have the same issue, but only if the page was directly requested from the server. Somehow by using LazyContentDoc instead of ContentDoc i was able to fix this issue at the moment.

[bryancurran]

also have the same issue. works locally but when building it just shows:

{ "message": "You should use slots with <ContentList>", "slot": "not-found" }

Edit: In my case it seems the content is actually missing from the build for some reason, because adding the #not-found template shows the not-found message. So for me the issue really is that the entire content directory isn't being included in the build.. idk why

[bryancurran]

I have this same issue with a <ContentList> when deployed on Netlify. It works properly when testing locally. My site is being built using the nuxi generate command with Node 18.17.1 and npm 9.6.7.

Did you ever end up finding a solution for this?

[brianmaierjr]

Also having the same issue deploying to netlify and with a <ContentList>. Works locally as well.

[RicoChr]

I had the same error message. My original code was:

<ContentDoc
      :path="contentPath"
    >
  <template v-slot="doc">
    <article>
      <h1>{{ doc.title }}</h1>
      <ContentRenderer :value="doc" />
    </article>
  </template>
</ContentDoc>

I added curly brackets to the 'doc' inside the 'template' tag like this:

<ContentDoc
      :path="contentPath"
    >
  <template v-slot="{ doc }">
    <article>
      <h1>{{ doc.title }}</h1>
      <ContentRenderer :value="doc" />
    </article>
  </template>
</ContentDoc>

That solved it. I hope it helps some of you.

[cco3]

I hope it helps some of you.

Thanks. I'd like to be able to use ContentDoc without explicitly using the slot...that is supposed to be supported according to the docs.

[mewforest]

Also having the same issue deploying to netlify and with a <ContentList>. Works locally as well.

Same for me, but has the error appears locally both for <ContentList> and <ContentList> 😕 Using slots doesn't solve my case.

In my case, fix was to change useFetch(...) in one my component to $fetch(...) on api call.

My original code was:

const { page } = useContent();
const { data } = await useFetch(`/api/meta?path=${page.value._path}`);

Updated code:

const { page } = useContent();
const data = await $fetch(`/api/meta?path=${page.value._path}`);

...and yep, It looks, like it's a Nuxt-Content bug.

[elmir-mammadli]

I have the same issue, but only if the page was directly requested from the server. Somehow by using LazyContentDoc instead of ContentDoc i was able to fix this issue at the moment.

Yup! It helped! Thanks!

[mewforest]

Yup! It helped! Thanks!

But in SSG mode LazyContentDoc doesn't work again.

[micdobro]

Still happening. What is really scary is that in dev mode everything works super dandy. Things fall apart after deployment.

[torce]

Same issue. Everything working in dev mode, but after nuxt generate and deploy client side navigation breaks.

I was using both <ContentDoc> and <MDC> components in the same page to render the main MD content and some document fields that are also in MD format.

Removing the <MDC> components and using only <ContentcDoc> seems to fix this issue for me.

Things that I have tried without results:

• <LazyContentDoc>
• Using a slot explicitly:

  <ContentDoc :path="contentPath">
   <template v-slot="{ doc }">
     <article>
       <h1>{{ doc.title }}</h1>
       <ContentRenderer :value="doc" />
     </article>
   </template>
  </ContentDoc>
  

• Replacing <NuxtLink> with regular links <a>. Not sure why, but with this change the pages are still broken after reloading, not only with client side navigation.

[GuillaumeDgr]

Hi, I have exactly the same issue in prod (dev works perfectly) :S Any update on this pls? Thanks a lot for your help!

[rahulkumarsingh73690]

+1 Same issue

[posva]

I'm seeing the same issue with

<ContentQuery path="/open-source/_intro" find="one" v-slot="{ data }">
  <ContentRenderer :value="data">
    <ContentRendererMarkdown :value="data" />
  </ContentRenderer>
</ContentQuery>

or

<ContentQuery path="/open-source/_intro" find="one" v-slot="{ data }">
  <ContentRenderer :value="data"></ContentRenderer>
</ContentQuery>

in prod only after nuxt generate. Everything works in dev mode.

All queries return a 404, e.g. /api/_content/query/0XF0tlkC88.1721293108801.json?_params={%22first%22:true,%22where%22:[{%22_path%22:%22/open-source/_for-individuals%22}],%22sort%22:[{%22_stem%22:1,%22$numeric%22:true}]}. When I check the generated content, it only contains one file:

.output/public/api
└── _content
    └── cache.1721293108801.json

2 directories, 1 file

This was working before. This update seems to break: https://github.com/posva/esm.dev/commit/a3732d6f31d62d6130d480958a2398ae6a9d3fe3. Using nuxt 3.12.2 works (generates all the needed files in /api/_content), so maybe this is an issue in Nuxt? cc @danielroe

[danielroe]

@posva If it's what I think it should be resolved in next Nuxt patch and you can workaround by adding / to nitro.prerender.routes.

[posva]

Indeed! That worked!

[GuillaumeDgr]

Hi, I can't get it to work although I updated the nuxt version (3.12.4) and added the "/" in nitro.prerender.routes. Thks for your help

[danielroe]

@GuillaumeDgr Can you provide a reproduction? 🙏

[FabianRzepka]

After updating nuxt and nuxt-content, an error appeared only after rendering nuxi generate in dev everything works. Previously, there was no such bug.

https://github.com/user-attachments/assets/0725ecef-0194-4650-bc51-1030d64c490a

Component in index page. There is a problem on these two components <ContentList> and <ContentQuery>.

      <ContentQuery path="/solutions">
        <template #default="{ data }">
          <UiCard v-for="article in data" :key="article._path">
            <template #link>
              <NuxtLink
                class="absolute top-0 bottom-0 left-0 right-0"
                :to="article._path"
              >
              </NuxtLink>
            </template>
            <img
              class="m-auto rounded-[0.6rem]"
              :src="article.image"
              :alt="article.title"
            />
            <div class="w-full mt-2 font-semibold text-center">
              {{ article.title }}
            </div>
          </UiCard>
        </template>
        <template #not-found>
          <p>Nie znaleziono.</p>
        </template>
      </ContentQuery>