Open florian-lefebvre opened 2 years ago
Got very similar issue which I think should be grouped with this one.
Config for SPA app nuxt.config.ts
import {defineNuxtConfig} from 'nuxt'
export default defineNuxtConfig({
ssr: false, // Disable Server Side rendering
modules: [
'@nuxt/content'
],
content: {
// Options
},
})
index.vue
<template>
<div class="page-container">
<div class="card" v-for="post of data">
<div class="card-header">
<NuxtLink :to="post._path">Open</NuxtLink>
</div>
<div class="card-body">
<ContentRenderer :value="post"/>
</div>
</div>
</div>
</template>
<script lang="ts">
export default {
async setup() {
const {data} = await useAsyncData('blog', () => {
return queryContent('/').find()
})
return {
data
}
}
};
</script>
Following files are present in content directory:
When I run npm run dev
I get the correct results (except front-matter issue which is discussed in separate topic):
When I run npm run generate
(to build a static SPA) and then npm run preview
i.e. the same error as reported by original author is shown
{
"message": "You should use slots with <ContentRenderer>",
"value": "<",
"excerpt": false,
"tag": "div"
}
As opposed to original authors's problem - I am using markdown
, not a json
I should also note that despite having only a dozen of markdown pages - I see 837 items on the page! Where are they coming from? no idea..
In network inspector I see a 200 response for:
Request URL: http://localhost:3000/api/_content/query/990068364?_params={%22where%22:[{%22_path%22:%22--REGEX+/^%5C%5C//%22}]}&previewToken
Full request:
Response is:
Not sure how any of this is related to the problem but hopefully it's of some value..
@florian-lefebvre Think of JSON files as data store not renderable content files, If you want to render a content you need to create markdown file.
However if you want your own logic and render JSON files too, you have to use slots and create UI for them.
@pavlexander Could you provide a reproduction using nuxt-starter? Also it would better to have in separate issue :)
@florian-lefebvre Think of JSON files as data store not renderable content files, If you want to render a content you need to create markdown file.
However if you want your own logic and render JSON files too, you have to use slots and create UI for them.
@pavlexander Could you provide a reproduction using nuxt-starter? Also it would better to have in separate issue :)
@farnabaz Yes sure, here it is: https://github.com/nuxt/content/issues/1202 I downloaded the starter codebase from the nuxt-starter template you have mentioned. And then added a bit of code on top until problem was reproducible. You will find details in that link.
For me this problem occurs the moment I update to @nuxt/content@2.0.1
.
Then my page breaks and I get the following message:
{
"message": "You should use slots with <ContentDoc>",
"slot": "default",
"data": {
"_path": "/_hero",
"_draft": false,
"_partial": true,
"title": "Unsichtbare Zahnspange:",
"subtitle": "Mehr Selbstvertrauen durch gerade Zähne.",
"description": "Sie sind unzufrieden mit Ihrer Zahnstellung? Mit den unsichtbaren Zahnschienen von Invisalign® ist auch im Erwachsenenalter eine erfolgreiche Behandlung einer Fehlstellung möglich. ",
"label": "Jetzt Termin ausmachen",
"_id": "content:_hero.json",
"_type": "json",
"_source": "content",
"_file": "_hero.json",
"_extension": "json"
}
}
Here is a link to my repo (sadly not that minimal):
And here is a link to a branch where I just updated to @nuxt/content@2.0.1
:
So far I'm unable to figure out the cause and because everything worked fine unitl @nuxt/content@2.0.1
it is just trial and error at the moment.
Every push in the right direction is much appreciated!
@stefanfrede This is a known issue in v2.0.1 which is fixed in edge version. It is planned to release next week. Meanwhile you can use edge version to resolve the issue. Just add this to your package.json
"@nuxt/content": "npm:@nuxt/content-edge@latest"
Also in the query inside c-hero
you need to remove the argument passed to queryContent
- return queryContent('/')
+ return queryContent()
.where({ _partial: true })
.only(['title', 'subtitle', 'description', 'label'])
.findOne();
/about
endpoint in npx nuxi init content-app -t content
app with latest npm:@nuxt/content-edge@latest
still return error after yarn generate/preview
{
"message": "You should use slots with <ContentDoc>",
"slot": "default",
"data": "<!DOCTYPE html>\n<html data-head-attrs=\"\">\n\n<head >\n <title>Nuxt Content</title><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><link rel=\"prefetch\" href=\"/api/_content/query/brX4CwCJoQ\"><meta name=\"description\" content=\"This page corresponds to the / route of your website. You can delete it or create another file in the content/ directory.\"><meta name=\"head:count\" content=\"4\"><link rel=\"modulepreload\" href=\"/_nuxt/entry-44d81aa7.mjs\" as=\"script\" crossorigin><link rel=\"modulepreload\" href=\"/_nuxt/_...slug_-37c219b1.mjs\" as=\"script\" crossorigin><link rel=\"modulepreload\" href=\"/_nuxt/ProseH1-b5bf0e08.mjs\" as=\"script\" crossorigin><link rel=\"modulepreload\" href=\"/_nuxt/ProseP-206c1b9a.mjs\" as=\"script\" crossorigin><link rel=\"modulepreload\" href=\"/_nuxt/ProseCodeInline-f25412ff.mjs\" as=\"script\" crossorigin><link rel=\"modulepreload\" href=\"/_nuxt/ProseA-a788d31a.mjs\" as=\"script\" crossorigin><link rel=\"modulepreload\" href=\"/_nuxt/ProseHr-aee51228.mjs\" as=\"script\" crossorigin><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ContentList-208a0115.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ContentNavigation-6487d949.mjs\"><link rel=\"prefetch stylesheet\" href=\"/_nuxt/ContentNavigation.fb1c1af1.css\"><link rel=\"prefetch stylesheet\" href=\"/_nuxt/ProseCode.c12da1e5.css\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/DocumentDrivenEmpty-d17e6709.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/DocumentDrivenNotFound-5fffecaa.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/Markdown-ca798dd2.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseCode-79edb398.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseBlockquote-06ab7348.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseEm-2c23c797.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseH2-99b8967b.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseH3-15bba5e3.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseH4-82d20986.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseH5-b333c377.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseH6-68c90136.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseImg-fb7494b8.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseLi-b8b7df76.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseOl-27615e10.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseStrong-3b4d944f.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseTable-2a95b8d7.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseTbody-b408fd71.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseTd-07406d5e.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseTh-d9dc6952.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseThead-c61261e1.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseTr-52303c2d.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/ProseUl-3051482a.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/web-socket-c7d28780.mjs\"><link rel=\"prefetch\" as=\"script\" href=\"/_nuxt/error-component-3c60dd44.mjs\">\n</head>\n\n<body data-head-attrs=\"\">\n <div id=\"__nuxt\"><div><main><!--[--><div><h1 id=\"nuxt-content\"><!--[-->Nuxt Content<!--]--></h1><p><!--[-->This page corresponds to the <code><!--[-->/<!--]--></code> route of your website. You can delete it or create another file in the <code><!--[-->content/<!--]--></code> directory.<!--]--></p><p><!--[-->Try to navigate to <a href=\"/about\" class=\"\"><!--[-->/about<!--]--></a>. These 2 pages are rendered by the <code><!--[-->pages/[...slug].vue<!--]--></code> component.<!--]--></p><hr><p><!--[-->Look at the <a href=\"https://content.nuxtjs.org/\" rel=\"nofollow\"><!--[-->Content documentation<!--]--></a> to learn more.<!--]--></p></div><!--]--></main></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B){return {data:{\"content-query-1DxZ1vYQk5\":{_path:f,_draft:e,_partial:e,_locale:\"en\",_empty:e,title:i,description:\"This page corresponds to the \\u002F route of your website. You can delete it or create another file in the content\\u002F directory.\",excerpt:{type:k,children:[{type:b,tag:l,props:{id:m},children:[{type:a,value:i}]},{type:b,tag:c,props:{},children:[{type:a,value:n},{type:b,tag:d,props:{},children:[{type:a,value:f}]},{type:a,value:o},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:q}]},{type:b,tag:c,props:{},children:[{type:a,value:r},{type:b,tag:g,props:{href:h},children:[{type:a,value:h}]},{type:a,value:s},{type:b,tag:d,props:{},children:[{type:a,value:t}]},{type:a,value:u}]},{type:b,tag:v,props:{},children:[]},{type:b,tag:c,props:{},children:[{type:a,value:w},{type:b,tag:g,props:{href:x,rel:[y]},children:[{type:a,value:z}]},{type:a,value:A}]}]},body:{type:k,children:[{type:b,tag:l,props:{id:m},children:[{type:a,value:i}]},{type:b,tag:c,props:{},children:[{type:a,value:n},{type:b,tag:d,props:{},children:[{type:a,value:f}]},{type:a,value:o},{type:b,tag:d,props:{},children:[{type:a,value:p}]},{type:a,value:q}]},{type:b,tag:c,props:{},children:[{type:a,value:r},{type:b,tag:g,props:{href:h},children:[{type:a,value:h}]},{type:a,value:s},{type:b,tag:d,props:{},children:[{type:a,value:t}]},{type:a,value:u}]},{type:b,tag:v,props:{},children:[]},{type:b,tag:c,props:{},children:[{type:a,value:w},{type:b,tag:g,props:{href:x,rel:[y]},children:[{type:a,value:z}]},{type:a,value:A}]}],toc:{title:j,searchDepth:B,depth:B,links:[]}},_type:\"markdown\",_id:\"content:index.md\",_source:\"content\",_file:\"index.md\",_extension:\"md\"}},state:{$serror:null},_errors:{},serverRendered:true,config:{public:{content:{base:\"_content\",tags:{p:\"prose-p\",a:\"prose-a\",blockquote:\"prose-blockquote\",\"code-inline\":\"prose-code-inline\",code:\"prose-code\",em:\"prose-em\",h1:\"prose-h1\",h2:\"prose-h2\",h3:\"prose-h3\",h4:\"prose-h4\",h5:\"prose-h5\",h6:\"prose-h6\",hr:\"prose-hr\",img:\"prose-img\",ul:\"prose-ul\",ol:\"prose-ol\",li:\"prose-li\",strong:\"prose-strong\",table:\"prose-table\",thead:\"prose-thead\",tbody:\"prose-tbody\",td:\"prose-td\",th:\"prose-th\",tr:\"prose-tr\"},highlight:e,wsUrl:j,documentDriven:e}},app:{baseURL:f,buildAssetsDir:\"\\u002F_nuxt\\u002F\",cdnURL:j}}}}(\"text\",\"element\",\"p\",\"code-inline\",false,\"\\u002F\",\"a\",\"\\u002Fabout\",\"Nuxt Content\",\"\",\"root\",\"h1\",\"nuxt-content\",\"This page corresponds to the \",\" route of your website. You can delete it or create another file in the \",\"content\\u002F\",\" directory.\",\"Try to navigate to \",\". These 2 pages are rendered by the \",\"pages\\u002F[...slug].vue\",\" component.\",\"hr\",\"Look at the \",\"https:\\u002F\\u002Fcontent.nuxtjs.org\\u002F\",\"nofollow\",\"Content documentation\",\" to learn more.\",2))</script><script type=\"module\" src=\"/_nuxt/entry-44d81aa7.mjs\" crossorigin></script><script type=\"module\" src=\"/_nuxt/_...slug_-37c219b1.mjs\" crossorigin></script><script type=\"module\" src=\"/_nuxt/ProseH1-b5bf0e08.mjs\" crossorigin></script><script type=\"module\" src=\"/_nuxt/ProseP-206c1b9a.mjs\" crossorigin></script><script type=\"module\" src=\"/_nuxt/ProseCodeInline-f25412ff.mjs\" crossorigin></script><script type=\"module\" src=\"/_nuxt/ProseA-a788d31a.mjs\" crossorigin></script><script type=\"module\" src=\"/_nuxt/ProseHr-aee51228.mjs\" crossorigin></script>\n</body>\n\n</html>"
}
any workaround?
Same problem here after changing to @nuxt/content-edge version 2.1.0-27661776.91d257e.
Steps to reproduce:
There is no problem while testing with npm run dev.
Thanks.
Having the same issue with version @nuxt/content-edge@2.1.0-27667349.b409f18
Anyone find a workaround yet?
This is related to an issue with nuxi preview
. https://github.com/nuxt/content/issues1281#issuecomment-1164579970
Instead of running yarn run preview
you can run npx serve .output/public
Instead of running
yarn run preview
you can runnpx 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
<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>",
...
}
Getting this on production with the latest nuxt and content
If I refresh the page it goes away
I'm seeing the same You should use slots with <ContentRenderer>
error when using SSG via nuxt generate
and nuxt preview
; as well as when deploying static to Netlify & Vercel.
Unlike @acidjazz, though, it does not go away for me if I refresh the page. I'm assuming this is a bug with Nuxt 3's static site generation right now, which is new with RC10
Would really be nice if we could figure this issue out - I have client projects launching soon and this is a production blocker
Any work around would also be greatly appreciated @benjamincanac
I check and "3.0.0-rc.11" don't fix it either. Scenario:
Use:
Solution for us: We use full document driven approach and error gone (before be use only dynamic page that we have more power to edit). It has something with mingled two way of creating pages (dynamic pages and markdown).
Fallback page (404) not creating in full static mode when declaring custom 404 name and this can be connected to issue as well.
I modified my ContentRenderer.vue render function as follows and it seems to fix things for me, it appeared the function was expecting an object for ctx.value
but was getting an array for whatever reason.
render(ctx) {
const slots = useSlots();
const { excerpt, tag } = ctx;
let { value } = ctx;
if (!value && slots?.empty) {
return slots.empty({ value, excerpt, tag, ...this.$attrs });
}
if (slots?.default) {
return slots.default({ value, excerpt, tag, ...this.$attrs });
}
if(Array.isArray(value)) {
value = value.shift()
}
if (value && value?._type === "markdown" && value?.body?.children?.length) {
return h(
ContentRendererMarkdown,
{
value,
excerpt,
tag,
...this.$attrs
}
);
}
return h(
"pre",
null,
JSON.stringify({ message: "You should use slots with <ContentRenderer>", value, excerpt, tag }, null, 2)
);
}
Would really be nice if we could figure this issue out - I have client projects launching soon and this is a production blocker
Any work around would also be greatly appreciated @benjamincanac
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.
Once I get more detail on what exactly fixed this I'll add more detail here in case anyone else runs into this issue
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)
I would like an option to change the content API to another directory name instead of /api.
I get this error when I am using it with markdown content from Strapi v4. Any updates on the issue?
I was having this issue with version 2.2.2. Moving the content directory from components directory to the root directory fixed it for me.
Environment
Operating System: Windows_NT
Node Version: v18.12.1
Nuxt Version: 3.0.0
Package Manager: yarn@3.30.0
Builder: vite
User Config: meta, css, modules, build, vite, nitro, app, publicRuntimeConfig, content
Runtime Modules: @nuxt/content@2.3.0, @glidejs/glide: 3.6.0, sass: 1.57.1, sitemap: 7.1.1, include-media: 1.4.10, yarn: 1.22.19
Issue is still happening for me, locally yarn dev
works 100% but the static site rending is broken for loading pages.
You can get the same by cloning this repository: https://github.com/nlxdodge/portfolio-nuxt followed by yarn install
, yarn dev
to see it running locally. And when running npx nuxi generate
and putting it on a host.
index.md and index.vue returns: "Document not found, overwrite this content with #not-found slot in
In the console I see that it tries to get a file from the /api folder that doesn exist?
https://website.nl/api/_content/query/brX4CwCJoQ.1673293917527.json?_params={"first":true,"where":[{"_path":"/"}],"sort":[{"_file":1,"$numeric":true}]}
I checked the remote and it only has /api/_content/cache.1673293917527.json
so I am not sure what's wrong now.
I checked the cached file contents and it seems to house everything it needs.
Getting this on production with the latest nuxt and content
![]()
If I refresh the page it goes away
had the same problem
Same here - doesn't appear if the post is accessed directly, but does appear if the blog post is navigated to.
I have the same problem: https://github.com/nuxt/content/issues/2128
In my case the issue was fixed thanks to this nuxt.config.ts
.
Original one:
routeRules: {
"/**": { isr: true },
},
nitro: {
preset: "vercel",
future: {
nativeSWR: true,
},
},
Fixed version:
routeRules: {
"/**": { isr: true },
"/api/**": { isr: false },
},
nitro: {
preset: "vercel",
future: {
nativeSWR: true,
},
},
runtimeConfig: {
nitro: { envPrefix: "VERCEL_" },
},
After investigating the issue, I found that api routes where cached incorrectly (without get params, or did not even call the serverless function behind).
Idk what the envPrefix
does, but without it the isr: false
on api routes wasn't working correctly.
Getting this on production with the latest nuxt and content
![]()
If I refresh the page it goes away
had the same problem
If you still have the same problem, it might be fixed now with https://github.com/Knogobert/ntn-boilerplate/pull/214 version 3.0.0
Environment
Windows_NT
v16.15.0
3.0.0-rc.3
yarn@1.22.5
vite
meta
,css
,modules
,build
,vite
,router
,publicRuntimeConfig
,content
,tailwindcss
@nuxt/content@2.0.0
,@nuxtjs/tailwindcss@5.1.2
,@vueuse/nuxt@8.5.0
,vue-plausible@1.3.1
-
Reproduction
Use the content-wind template and create a
test.json
in/content
with one of the 2 following contents:or
Then go to
http://localhost:3000/test
Describe the bug
I expect the content but I get the following error rendered by the component:
Same with
ContentDoc
Additional context
No response
Logs
No response