MDC Prose components not rendering

[llayz46]

Environment

• Operating System: Windows_NT
• Node Version: v22.11.0
• Nuxt Version: 3.14.159
• CLI Version: 3.15.0
• Nitro Version: 2.10.4
• Package Manager: yarn@1.22.22
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/content@3.0.0-alpha.6, @nuxtjs/tailwindcss@6.12.2, @nuxtjs/google-fonts@3.2.0, @vueuse/motion/nuxt@2.2.6, nuxt-time@1.0.2, @pinia/nuxt@0.7.0, pinia-plugin-persistedstate/nuxt, nuxt-gtag@3.0.2, shadcn-nuxt@0.11.3
• Build Modules: -

Version

v3.0.0-alpha.6

Reproduction

Create custom prose components to override default. Like create a ProseA file in components/content folder with the code provide in mdc docs then npx nuxi generate to generate static deployment and preview.

Description

Hello,

I'm not sure what is causing this issue, but when I try to preview my app for deployment using npx nuxi generate, my custom Prose components from the components/content folder are no longer rendering. However, they render correctly in the local environment.

I have nothing special in my nuxt.config to refer to prose components.

Has anyone encountered a similar problem or have any suggestions for troubleshooting?

Additional context

No response

Logs

[farnabaz]

Could you try with @nuxt/content@3.0.0-alpha.7? The issue should be fixed in alpha.7.
If the issue persists a simple reproduction would be good for faster debugging. It works as expected in my tests.

[llayz46]

When i upgrade to @nuxt/content@3.0.0-alpha.7 and try to launch my development server without changing anything in my markdown files or else, i have an error concerning my front-matter :

ERROR  [unhandledRejection] Unexpected scalar at node end at line 8, column 23:           

thumbnail: 'about.jpg'
                      ^
  thumbnail: 'about.jpg'
  ^

  at Composer.onError (node_modules\yaml\dist\compose\composer.js:69:34)
  at Object.resolveEnd (node_modules\yaml\dist\compose\resolve-end.js:31:21)
  at Object.resolveFlowScalar (node_modules\yaml\dist\compose\resolve-flow-scalar.js:35:27)
  at Object.composeScalar (node_modules\yaml\dist\compose\compose-scalar.js:11:29)
  at composeNode (node_modules\yaml\dist\compose\compose-node.js:26:34)
  at Object.resolveBlockMap (node_modules\yaml\dist\compose\resolve-block-map.js:85:19)
  at resolveCollection (node_modules\yaml\dist\compose\compose-collection.js:13:27)
  at Object.composeCollection (node_modules\yaml\dist\compose\compose-collection.js:59:16)
  at Object.composeNode (node_modules\yaml\dist\compose\compose-node.js:33:38)
  at Object.composeDoc (node_modules\yaml\dist\compose\compose-doc.js:35:23)

I have this error for all my files. An exemple of typical front matter :

---
title: 'About !'
slug: 'about'
description: 'Hello world !'
date: 2024-11-16
draft: false
tags: [ "dev", "test" ]
thumbnail: 'about.jpg'
---

So when i remove some all tags & thumbnail keys in front-matter it look like fix but after this, my slug page can't find the markdown file. My files are in the content/articles/*.md folder, im fetching for a list like in the doc :

const { data: articles } = await useAsyncData('documents-list', () => {
    return queryCollection('articles')
        .order('date', 'DESC')
        .all()
})

after, im making link to each file but the link change from url/blog/slug to url/blog/articles(collection)/slug :

<NuxtLink :to="`/blog${article.path}`">

And n my slug page i can't fetch the markdown file, only a 404.

const route = useRoute()

const {data: article} = await useAsyncData(route.path, () => {
    return queryCollection('articles').path(`/${route.params.slug}`).first()
})

I try to change everything but i dont find the problem, im a bit lost ahah.

[farnabaz]

This is strange, Could you give me access to your project?

[llayz46]

Yes of course, there is the branch of alpha 7 : https://github.com/llayz46/nuxt-layzblog/tree/chore/nuxt-content-v3.0.0-alpha.7

[farnabaz]

I just opened a PR to your repository, to change the collection source and add prefix to your collection.

llayz46/nuxt-layzblog#1

It should fix the query issue.

Regarding the Yaml problem, Could you try clean install (remove node_modules, and lock file) and remove .data directory?

[llayz46]

Thank you very much for your help !

For the YAML problem, i remove .data, package-lock.json, node_modules and reinstall the dependencies but i still have this [unhandledRejection] Unexpected scalar at node end at line 8, column 23: error.

[farnabaz]

It works fine for me, so it might related to window encoding maybe.
I don't have access to windows right now, need to debug and find the cause

[llayz46]

Okay, perfect! If it works fine for you, I'll look into fixing it on my end. Thanks!

[llayz46]

It works fine for me, so it might related to window encoding maybe. I don't have access to windows right now, need to debug and find the cause

It related to line endings on Windows. Converting markdown files of your content folder from CRLF (Windows) to LF (Linux/macOS) resolve the error.

[llayz46]

Everything is working, but the components that are overriding the default MDC components are not working.

For example, I have my components/content folder with a few components: some fully custom and some overriding the default ones, like the ProseH2, which overrides the default Prose H2, and Subtitle, which is just a custom component.

On the npx nuxi generate command i see my customs components but not ProseH2, ProsePre, ProseCode... :

ℹ .nuxt/dist/server/_nuxt/ProseH1-52kussqL.js                   2.08 kB │ map:   1.02 kB
ℹ .nuxt/dist/server/_nuxt/ProseH3-CVKQjQsp.js                   2.09 kB │ map:   1.03 kB
ℹ .nuxt/dist/server/_nuxt/ProseH4-67y4UN7G.js                   2.09 kB │ map:   1.03 kB

ℹ .nuxt/dist/server/_nuxt/Subtitle-BdIdcH-R.js                  1.21 kB │ map:   0.13 kB

[llayz46]

I found the solution to my problem. It was caused by Nuxt's "tree-shaking", which removed custom Prose components during the static generation because of the non official use in view. By disabling tree-shaking for the @nuxt/content module in nuxt.config.js, the components are now correctly included in the production build:

build: {
    transpile: ['@nuxt/content']
  }

Thank you again so much for all the help provided!