构建设计系统包后导入MUI主题时样式模块解析失败求助

核心问题 #

你的设计系统包以严格ESM模式输出（package.json中type: module），但Rollup构建时未正确处理@mui/material/styles这类子路径导入的文件扩展名，导致消费项目的模块解析器无法定位对应文件。

具体修复方案 #

1. 配置Rollup的@rollup/plugin-node-resolve插件 #

在Rollup配置文件中，明确解析规则以适配MUI模块的路径处理：

import resolve from '@rollup/plugin-node-resolve';

export default {
  plugins: [
    resolve({
      // 限定仅解析指定外部包
      resolveOnly: ['@mui/material', '@mui/system'],
      // 声明支持的文件扩展名
      extensions: ['.js', '.jsx', '.ts', '.tsx']
    })
  ]
};

2. 用@rollup/plugin-commonjs转换MUI的CommonJS模块 #

部分MUI子模块为CommonJS格式，需转换为ESM适配严格模式：

import commonjs from '@rollup/plugin-commonjs';

export default {
  plugins: [
    commonjs({
      include: /node_modules\/@mui/
    })
  ]
};

3. 调整设计系统包的package.json #

添加exports字段明确子路径解析规则，帮助消费项目定位文件：

{
  "exports": {
    ".": "./dist/esm/index.js",
    "./theme": "./dist/esm/theme.js"
  },
  "type": "module"
}

4. 强制Rollup输出带扩展名的文件 #

配置Rollup输出规则，确保所有构建产物保留文件扩展名，同时保留模块结构：

export default {
  output: {
    dir: 'dist/esm',
    format: 'esm',
    entryFileNames: '[name].js',
    chunkFileNames: '[name].js',
    preserveModules: true
  }
};

5. 补全MUI导入路径的扩展名 #

在设计系统源码中，直接指向MUI模块的完整文件路径（需MUI的ESM版本支持）：

// 替换原导入
import { createTheme } from '@mui/material/styles';
// 改为带扩展名的完整路径
import { createTheme } from '@mui/material/styles/index.js';

验证步骤 #

1. 在design-system目录重新执行npm run build
2. 在消费项目中重新安装包并启动，确认错误消失

内容的提问来源于stack exchange，提问作者Antonio Gamiz Delgado