VS Code MDX扩展报错：默认导出与脚注问题求助

1. 处理「A module cannot have multiple default exports.ts(2528)」错误 #

问题场景 #

在MDX文件中添加如下默认导出代码时触发类型错误：

export default ({children}) => <div className='prose'>{children}</div>

错误原因是Next.js会自动将MDX页面内容编译为默认导出的页面组件，手动添加的默认导出与自动生成的组件冲突，导致「多个默认导出」的报错。

解决方案 #

方案一：改用命名导出布局组件

将布局组件改为命名导出，在MDX内容中显式导入并包裹内容：

import { ProseLayout } from '../components/ProseLayout'

<ProseLayout>
你的MDX内容...
</ProseLayout>

对应的组件文件（如components/ProseLayout.tsx）：

export default function ProseLayout({ children }) {
  return <div className="prose">{children}</div>
}

方案二：通过Rehype插件全局添加prose类

无需在MDX中导出组件，直接在next.config.mjs中添加自定义Rehype插件，自动给MDX根容器添加prose类：

// next.config.mjs
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug';
import nextMDX from '@next/mdx'

// 自定义插件：给MDX根元素添加prose类
const rehypeAddProseClass = () => {
  return (tree) => {
    if (tree.type === 'root') {
      const rootDiv = tree.children.find(node => node.type === 'element' && node.tagName === 'div');
      if (rootDiv) {
        rootDiv.properties.className = (rootDiv.properties.className || '') + ' prose';
      }
    }
  };
};

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeSlug, rehypeAddProseClass],
  }
})

const nextConfig = {
  output: 'export',
  trailingSlash: true,
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
}

export default withMDX(nextConfig)

2. 处理「No link definition found: '^ziyade'(link.no-such-reference)」错误 #

问题场景 #

使用GFM脚注格式时触发ESLint错误，即便已经配置了remark-gfm插件：

Mübalağa ve ziyade[^ziyade]lik manası...

[^ziyade]: ziyade: fazla, çok

错误原因是ESLint的MDX规则未识别GFM脚注语法，误判为无效链接引用。

解决方案 #

方案一：在ESLint配置中禁用相关规则

修改.eslintrc.json，给MDX文件单独禁用link-no-such-reference规则：

{
  "overrides": [
    {
      "files": ["*.mdx"],
      "rules": {
        "link-no-such-reference": "off"
      }
    }
  ]
}

方案二：配置ESLint支持MDX+GFM

在.eslintrc.json中指定MDX解析器，并关联remark-gfm插件：

{
  "extends": ["plugin:mdx/recommended"],
  "overrides": [
    {
      "files": ["*.mdx"],
      "parser": "eslint-mdx",
      "settings": {
        "mdx": {
          "remarkPlugins": ["remark-gfm"]
        }
      }
    }
  ]
}

方案三：调整VS Code MDX扩展设置

打开VS Code设置，搜索「MDX: Enable GFM」并勾选该选项，让编辑器正确识别GFM脚注语法。

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