nuxt / content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.

Home Page:https://content.nuxt.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`You should use slots` error when previewing non-ssr application

pavlexander opened this issue · comments

Environment

Nuxt CLI v3.0.0-rc.3 21:25:08
RootDir: C:\DEV\reposGithub\nuxt-starter-bug-repro.git 21:25:11
Nuxt project info: 21:25:11


  • Operating System: Windows_NT
  • Node Version: v16.13.1
  • Nuxt Version: 3.0.0-rc.3
  • Package Manager: npm@8.7.0
  • Builder: vite
  • User Config: ssr, modules, content
  • Runtime Modules: @nuxt/content@2.0.1
  • Build Modules: -

Reproduction

Repro repo: https://github.com/pavlexander/nuxt-starter-bug-repro

  1. fork nuxt-starter https://stackblitz.com/edit/nuxt-starter-njk4bl?file=README.md
  2. add nuxt content package, enable prerendering by setting ssr: false, in nuxt config
  3. add basic navigation
  4. Run npm run dev
    Observe no errors during runtime, list is rendered
    image
  5. Run npm run generate
  6. run npm run preview
    Markdown content not rendered. Error is shown You should use slots with <ContentRenderer>
    image

Describe the bug

I have initially reported this bug in supposedly same issue: #1154 (comment)

The bug, basically, does not allow you to pre-render the nuxt content (markdown pages). Because every time you try to render them you get the error as in description above.

The issue is not reproducible when you run serve the application from npm run dev command.

Additional context

What I try to achieve is to enable pre-rendering of all pages. So I could host my vue app without the backend server.

It could either be an SPA with pre-rendered pages or a fully static pre-generated website. Currently I am trying to do the former.

Logs

No response

Update

After trying few things out it seems like the issue is with the parser or query results.

if you comment out the:

<!--      <div class="card-body">
        <ContentRenderer :value="post"/>
      </div>-->

In DOM you see the following:

image

And a perfectly rendered list:

image

And no errors in console.

So what I think is happening is - the nuxt content is querying data and thinks that a perfectly valid data is returned, so he renders it. And when I try to render a markdown specifically - it shows the error as the data in not markdown format (i.e. You should use slots with <ContentRenderer>).

Anyways, I think this is a bug in any case. Error should be shown if data is invalid or missing. And, I still hope that you could provide some examples how to do the pre-rendering properly. And if pre-rendering is not supposed to work then please update the documentation.

Thank you for the issue and description. Generating non-ssr websites is tricky and yet not supported in V2.

I'd suggest using ssr: true until the official support of non-ssr projects. The experience is totally same, expect the first load :)

I'm closing this in favor of #1229.