Expo+Material UI开发健身日志App遇clsx模块解析Metro错误

问题重现 #

• 环境：Windows 11，Node.js 18.18.1/20.8.1
• 项目初始化：用npx create-expo-app --template导航预设创建项目
• 触发场景：集成Material UI DataGrid组件后，执行npm run web启动Web端
• 错误表现：Metro报错，提示已找到clsx包，但无法解析其package.json中指定的dist/clsx.mjs模块，实际该文件确实存在于node_modules/clsx目录下

可行解决方案 #

1. 给Metro添加clsx专属解析规则 #

在项目根目录创建或修改metro.config.js，强制Metro在Web环境下直接定位到clsx的ES模块文件：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// 拦截clsx模块的解析请求
config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName === 'clsx' && platform === 'web') {
    return {
      filePath: require.resolve('clsx/dist/clsx.mjs'),
    };
  }
  // 其他模块沿用默认解析逻辑
  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;

修改后重启Metro服务（重新执行npm run web）即可生效。

2. 临时调整clsx的package.json入口 #

进入node_modules/clsx/package.json，修改module字段，或者新增browser字段指定Web环境的入口文件：

{
  "module": "dist/clsx.js",
  "browser": "dist/clsx.js"
}

⚠️ 注意：这个修改会在下次执行npm install时被覆盖，仅适合临时验证问题根源，长期使用建议用方案1。

3. 降级clsx到稳定版本 #

部分新版本clsx的ES模块结构可能和Metro的Web解析逻辑不兼容，试试降级到1.2.1版本：

npm install clsx@1.2.1

4. 开启Metro对mjs后缀文件的支持 #

在metro.config.js中添加mjs到可解析的文件扩展名列表：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// 添加mjs后缀支持
config.resolver.sourceExts.push('mjs');

module.exports = config;

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