You should use slots when using components and json files
#1154
Comments
|
Got very similar issue which I think should be grouped with this one. Config for SPA app
Following files are present in content directory:
When I run
When I run
i.e. the same error as reported by original author is shown As opposed to original authors's problem - I am using 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:
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 :) |
@farnabaz Yes sure, here it is: #1202 |
|
For me this problem occurs the moment I update to Then my page breaks and I get the following message: Here is a link to my repo (sadly not that minimal): And here is a link to a branch where I just updated to
So far I'm unable to figure out the cause and because everything worked fine unitl 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 Also in the query inside - return queryContent('/')
+ return queryContent()
.where({ _partial: true })
.only(['title', 'subtitle', 'description', 'label'])
.findOne(); |
nuxt/content#1154 (comment) Co-authored-by: Stefan Frede <sfr@wyn.rocks>
|
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 Instead of running |
Unfortunately, I am seeing the same error even if I serve I tried changing my catch-all page so that 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 |
|
Getting this on production with the latest nuxt and content
If I refresh the page it goes away |
|
I'm seeing the same 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.
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 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)
);
} |
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 too was having issues with CloudFront. Adding an adjusted behavior for |
|
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 Issue is still happening for me, locally You can get the same by cloning this repository: https://github.com/nlxdodge/portfolio-nuxt followed by 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? I checked the remote and it only has |
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: #2128 |
|
In my case the issue was fixed thanks to this Original one: Fixed version: After investigating the issue, I found that api routes where cached incorrectly (without get params, or did not even call the serverless function behind). |
If you still have the same problem, it might be fixed now with Knogobert/ntn-boilerplate#214 version 3.0.0 |
Environment
Windows_NTv16.15.03.0.0-rc.3yarn@1.22.5vitemeta,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.jsonin/contentwith 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/testDescribe 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
ContentDocAdditional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: