[Vue warn]: Failed to resolve component: MDCRenderer when upgrading to Nuxt 3.8.2

[mklueh]

Environment

Nuxt project info: 19:20:01

---

• Operating System: Windows_NT
• Node Version: v20.7.0
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.7.2
• Package Manager: yarn@4.0.2
• Builder: -
• User Config: extends, devtools, dev, debug, modules, typescript, ssr, routeRules, nitro, linkChecker, css, runtimeConfig, app, build, nuxtIcon, vueuse, content, experimental
• Runtime Modules: @unocss/nuxt, @nuxt/content, @vueuse/nuxt@10.6.1, nuxt-icon, @nuxtjs/mdc

• Build Modules: -

👉 Report an issue: https://github.com/nuxt/nuxt/issues/new 19:20:01

👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new

👉 Read documentation: https://nuxt.com

Reproduction

This is my content config, that has not changed for a long time

  content: {
    documentDriven: false,

    highlight: {
      // Theme used in all color schemes.
      theme: "github-light",
      preload: [
        "diff",
        "ts",
        "ini",
        "docker",
        "js",
        "css",
        "java",
        "groovy",
        "markdown",
        "sql",
        "xml",
        "json"
      ]
    },

    markdown: {
      mdc: true,
      toc: {
        depth: 4,
        searchDepth: 4
      }
    }
  },

and I'm using the ContentRenderer like this

<ContentRenderer :value="post"/>

Describe the bug

I'm suddenly getting

[Vue warn]: Failed to resolve component: MDCRenderer
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Component <Anonymous> is missing template or render function.

for my application.

I've dropped in @nuxtjs/mdc in hope it would resolve the missing component, but seems to be not related.

Additional context

No response

Logs

No response

[shershen08]

I am having the same issue

[mklueh]

@shershen08 glad to hear I'm not the only one

[shershen08]

it worked OK for me before I tried adding @nuxt/ui module 2h ago... it seems some deps has been updated during this install

[shershen08]

@mklueh I managed to fix it by setting the exact the versions of the following pkgs:

    "@nuxt-themes/docus": "1.15.0",
    "@nuxt/content": "2.8.0",

especially check @nuxt/content - 2.8.0, is 1 minor below latest which is 2.9.0

[mklueh]

@shershen08 I'm neither using the docus theme, nor nuxt ui, but I got it working with nuxt/content:2.9.0 by downgrading some other packages 😅 will look into it more tomorrow

Edit: it happens as soon as I raise those Nuxt version numbers from 3.8.1 to 3.8.2

[wJoenn]

I'm having the same problem. This works

    "@nuxt/content": "2.8.5",
    "nuxt": "^3.8.2"

So does this

    "@nuxt/content": "2.9.0",
    "nuxt": "^3.8.1"

But this won't

    "@nuxt/content": "2.9.0",
    "nuxt": "^3.8.2"

[robinsimonklein]

Same issue here

[mklueh]

I've resolved it somehow and it works with

 "@nuxt/content": "2.9.0",
  "nuxt": "^3.8.2"

I had the suspicion, that

import { transformerVariantGroup } from "unocss";

was responsible, so I removed it and it resolved it "somehow" in my reproducer project.

But then the issue appeared again and then I've upgraded

nuxt-seo-kit and replaced it with the new version @nuxtseo/module

https://nuxtseo.com/nuxt-seo/getting-started/installation

Pls check if you have those packages in place

[paranoidPhantom]

Having same issue, here is my package.json (after downgrading to v3.8.1): However, this did not help. I reverted all changes to package.json and package-lock.json, and it still does not work. No clue why... )

[farnabaz]

Could you try upgrading to latest version of Nuxt and Content module with clean install? (update versions, remove your lock file and then install deps)

[botmaster]

I just ran npx nuxi upgrade (remove node_modules and yarn.lock). And it works 🤷‍♂️.

My deps

[farnabaz]

This is a common issue with lets say all package manager that creates conflict between different versions of packages. As for this issue, different versions of scule package might exists in your lock file and it caused this propblem.

[mrkclub2]

I just ran npx nuxi upgrade (remove node_modules and yarn.lock). And it works 🤷‍♂️.

My deps

not working

[Revaycolizer]

i am having the same issue just initialized a project and getting this error after running development server

[MrSunshyne]

same issue

[paranoidPhantom]

Same issue, did everything above, not helping.

[paranoidPhantom]

Made a blank code-sandbox with only Nuxt 3.9.0 and MDC 0.3.0 and it still does not resolve the component.

[okumaru]

In Nuxt content documentation,

Components that are used in Markdown has to be marked as global in your Nuxt app if you don't use the components/content/ directory.

I use Nuxt ^3.9.3 and Nuxt content ^2.11.0

If I create component ~/components/content/Card.vue component not detected, If I create component ~/components/content/Card.global.vue component still not detected, And I update nuxt configuration

export default defineNuxtConfig({
  components: {
     global: true,
     dirs: ['~/components']
  },
})

Component detected in my markdown content file. I hope problem solved in you all too.

[wJoenn]

@farnabaz haven't seen this issue in a while. I'm using nuxt 3.11.1 and /content 2.12.1 now and everything work as intended.

Issue can probably be closed

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.