MDX中引用React复合组件子项触发ESLint报错问题咨询

报错原因 #

eslint-plugin-mdx@^2.0.5的JSX解析逻辑存在局限性，无法正确识别React复合组件的命名空间子组件（即<CompositeComponent.Child>这种通过父组件挂载的子组件写法）。ESLint的静态分析会将CompositeComponent.Child视为未定义的独立标识符，而Storybook的编译流程（依赖Babel或Webpack的React语法处理）能正确解析这种嵌套属性挂载的子组件，所以出现功能正常但ESLint报错的矛盾情况。

可行解决方案 #

方案1：显式导入子组件 #

修改MDX文件的导入语句，将子组件单独导入，直接使用子组件标识符：

import CompositeComponent, { Child } from '../path/to/CompositeComponent';

### CompositeComponent

Some copy about the component.

<Canvas isExpanded={true}>
  <>
    <GlobalStyle />
    <CompositeComponent>
      <Child>item</Child>
      <Child>item</Child>
    </CompositeComponent>
  </>
</Canvas>

这种写法能让ESLint清晰识别到Child是已导入的合法标识符，彻底解决报错。

方案2：升级eslint-plugin-mdx版本 #

该问题在eslint-plugin-mdx的后续版本（如3.x及以上）中已被修复。执行升级命令：

npm update eslint-plugin-mdx --save-dev
# 或使用yarn
yarn upgrade eslint-plugin-mdx --dev

升级后重新运行ESLint，报错应该会自动消失。

方案3：配置ESLint全局变量（不推荐，仅应急用） #

如果暂时无法升级或修改导入方式，可以在ESLint配置中声明CompositeComponent.Child为全局变量：
在项目根目录的.eslintrc.js或对应MDX的配置块中添加：

{
  "overrides": [
    {
      "files": ["*.mdx"],
      "globals": {
        "CompositeComponent.Child": true
      }
    }
  ]
}

这种方式只是告诉ESLint忽略该标识符的未定义检查，没有从根源解决解析问题，仅作为临时方案。

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