ES模块重导出MDX组件对象时导入运行异常问题求助

报错的核心原因是ES模块的导入导出语法不匹配：

• file2中使用的是默认导出（export default），导出的是包含Box、Popup属性的组件配置对象
• 你在file1中使用的是命名空间导入语法import * as MDXComponents from './file2'，这种语法会把目标模块的所有导出内容组装成一个模块对象，你通过export default导出的内容，只会被挂在这个模块对象的default属性上，不会直接作为MDXComponents的值。

此时你拿到的MDXComponents实际结构是：

{
  default: {
    Box: /* Box组件 */,
    Popup: /* Popup组件 */
  }
}

直接访问MDXComponents.Box、MDXComponents.Popup自然会得到undefined，导致运行异常。

直接修改file1的导入语句，使用默认导入语法匹配file2的默认导出即可，修改后MDXComponents的结构和你抽离文件前的结构完全一致，不需要改动后续使用逻辑：

// file 1
import MDXComponents from './file2'

// 原有使用MDXComponents的逻辑无需修改

如果确实需要使用命名空间导入写法，也可以手动取default属性（不推荐，写法冗余）：

// file 1
import * as MDXComponentsModule from './file2'
const MDXComponents = MDXComponentsModule.default

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