Nuxt 3升级至3.7及nuxt/content升级至2.8后组件重名警告的解决方法

问题原因 #

nuxt/content 2.8版本开始内置了MDC语法支持，与单独安装的@nuxtjs/mdc包产生组件命名冲突——两者都提供了ProseCode和ProsePre组件，导致Nuxt启动时抛出重名警告。

解决方案 #

方案一：移除@nuxtjs/mdc依赖（推荐）

由于nuxt/content 2.8+已原生集成MDC功能，无需再单独安装@nuxtjs/mdc：

• 执行卸载命令：

  # npm
  npm uninstall @nuxtjs/mdc
  
  # yarn
  yarn remove @nuxtjs/mdc
  
  # pnpm
  pnpm remove @nuxtjs/mdc
  

• 打开nuxt.config.ts，移除与@nuxtjs/mdc相关的模块配置项。

方案二：保留双依赖，手动指定组件优先级

如果需要同时保留两个包，可通过配置指定优先使用的组件：

1. 指定全局组件命名空间优先级
   在nuxt.config.ts中配置优先加载某一来源的组件：

export default defineNuxtConfig({
  components: {
    globalNamespaces: ['content'] // 优先使用nuxt/content提供的Prose组件
    // 若想优先使用mdc的组件，改为['mdc']
  }
})

2. 单独覆盖冲突组件
   针对冲突的组件单独指定来源：

export default defineNuxtConfig({
  components: {
    overrides: {
      'ProseCode': './node_modules/@nuxt/content/dist/runtime/components/Prose/ProseCode.vue',
      'ProsePre': './node_modules/@nuxt/content/dist/runtime/components/Prose/ProsePre.vue'
    }
  }
})

3. 禁用其中一个包的组件自动导入
   选择禁用其中一个包的组件自动注册，避免冲突：

export default defineNuxtConfig({
  // 禁用nuxt/content的Prose组件自动导入
  content: {
    components: {
      prose: false
    }
  },
  // 或者禁用@nuxtjs/mdc的组件自动导入
  mdc: {
    components: false
  }
})

内容的提问来源于stack exchange，提问作者ofcosxx