SleepiestAdam commented 1 year ago

Environment

Operating System: Darwin
Node Version: v20.3.1
Nuxt Version: 3.6.1
Nitro Version: 2.5.2
Package Manager: npm@9.7.2
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/tailwindcss@6.8.0, @nuxt/content@2.7.0, @pinia/nuxt@0.4.11, @nuxtjs/google-fonts@3.0.1, @nuxtjs/i18n@8.0.0-beta.12, @nuxt/image@1.0.0-rc.1, nuxt-icon@0.1.8, nuxt-schema-org@2.2.0, @funken-studio/sitemap-nuxt-3@4.0.4, @vueuse/motion/nuxt@2.0.0, nuxt-delay-hydration@1.2.1
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 ", ... }

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 commented 1 year ago

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 commented 1 year ago

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

atinux commented 1 year ago

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

cossssmin commented 1 year ago

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:

<img width="608" alt="image" src="https://github.com/nuxt/content/assets/1656595/1b85ae68-2713-4c72-8985-92cfb6e0cc15">

### ContentList

Code used (also copied from [docs page](https://content.nuxtjs.org/api/components/content-list#slots)):

```vue
<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:  npm@8.4.0
- Builder:          vite
- User Config:      content, css, experimental, modules, postcss, nitro, runtimeConfig, spaLoadingTemplate, typescript
- Runtime Modules:  nuxt-og-image@2.0.13, ./modules/routes-list, ./modules/docs-navigation, ./modules/github-release, ./modules/shiki/shiki-custom, @nuxt/content@2.7.2
- Build Modules:    -
------------------------------

riderx commented 1 year ago

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

riderx commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

riderx commented 1 year ago

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

cowboyxup commented 8 months ago

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 commented 8 months ago

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

{ "message": "You should use slots with \", "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 commented 8 months ago

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 commented 8 months ago

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

RicoChr commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

Yup! It helped! Thanks!

But in SSG mode LazyContentDoc doesn't work again.

micdobro commented 6 months ago

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

torce commented 5 months ago

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 commented 4 months ago

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 commented 4 months ago

+1 Same issue

posva commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

Indeed! That worked!

GuillaumeDgr commented 3 months ago

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 commented 3 months ago

@GuillaumeDgr Can you provide a reproduction? 🙏

FabianRzepka commented 1 month ago

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>

ghost commented 1 month ago

@atinux @danielroe

BTW: The problem still exists. Any idea? Prerender routes? It wouldn't be nice, if the user get an error during I update and deploy.

https://danielhill.nuxt.space/

My Reproduction

My nuxt content website is opened in a browser. I add a mark down file and wait until the deployment process is complete. The website is still open in the browser.

After the deployment is complete and I navigate to another page on the still opened website, the content of the article is no longer displayed with the note: "...use slots...".

However, if I refresh the website using the browser button, the articles are displayed again and everything works normally.