`You should use slots` when using components and json files

Environment

• Operating System: Windows_NT
• Node Version: v16.15.0
• Nuxt Version: 3.0.0-rc.3
• Package Manager: yarn@1.22.5
• Builder: vite
• User Config: meta, css, modules, build, vite, router, publicRuntimeConfig, content, tailwindcss
• Runtime Modules: @nuxt/content@2.0.0, @nuxtjs/tailwindcss@5.1.2, @vueuse/nuxt@8.5.0, vue-plausible@1.3.1
• Build Modules: -

Reproduction

Use the content-wind template and create a test.json in /content with one of the 2 following contents:

{
    "title": "Test",
    "description": "a test description"
}

or

{
    "title": "Test",
    "description": "a test description",
    "body": {
        "type": "root",
        "children": [
            {
                "type": "element",
                "tag": "h1",
                "props": {
                    "id": "title"
                },
                "children": [
                    {
                        "type": "text",
                        "value": "title"
                    }
                ]
            }
        ]
    }
}

Then go to http://localhost:3000/test

Describe the bug

I expect the content but I get the following error rendered by the component:

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {
    "_path": "/test",
    "_draft": false,
    "_partial": false,
    "title": "Test",
    "description": "a test description",
    "excerpt": {
      "type": "root",
      "children": [
        {
          "type": "element",
          "tag": "h1",
          "props": {
            "id": "title"
          },
          "children": [
            {
              "type": "text",
              "value": "title"
            }
          ]
        }
      ]
    },
    "body": {
      "type": "root",
      "children": [
        {
          "type": "element",
          "tag": "h1",
          "props": {
            "id": "title"
          },
          "children": [
            {
              "type": "text",
              "value": "title"
            }
          ]
        }
      ],
      "toc": {
        "title": "",
        "searchDepth": 2,
        "depth": 2,
        "links": []
      }
    },
    "_id": "content:2.test.json",
    "_type": "json",
    "_source": "content",
    "_file": "2.test.json",
    "_extension": "json"
  },
  "excerpt": false,
  "tag": "div"
}

Same with ContentDoc

Additional context

No response

Logs

No response

[jbierfeldt]

Instead of running yarn run preview you can run npx serve .output/public

Unfortunately, I am seeing the same error even if I serve .output/public or dist directly.

{
  "message": "You should use slots with <ContentDoc>",
  "slot": "default",
  ...
}

I tried changing my catch-all page so that the <ContentDoc> component uses slots, using the code below, pulled directly from the <ContentDoc> api page:

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

After doing this, I’m still getting essentially the same error, but now it is complaining about the lack of slot usage in <ContentRenderer>:

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

[L422Y]

I found that my issue was dealing with CloudFront and Legacy cache settings - I updated my cache settings to their current version and this solved the problem.

I too was having issues with CloudFront. Adding an adjusted behavior for /api/* seems to have also helped, but I did a clean node_modules install and lost my modification (posted above) and things stopped working again, once I restored the change, things seem to work as expected (mostly)