Metro项目中启用packageExports时axios加载失败的解决方案

问题背景

在使用Expo Monorepo项目时，开发者可能会遇到一个与Metro打包工具相关的问题：当在自定义Metro配置中启用unstable_enablePackageExports选项时，axios库会加载失败并报错。错误信息表明axios尝试导入Node.js标准库模块"url"，而React Native运行环境并不包含这些Node.js标准库。

错误现象

具体错误表现为：

The package at "node_modules/axios/dist/node/axios.cjs" attempted to import the Node standard library module "url".
It failed because the native React runtime does not include the Node standard library.

问题根源

这个问题源于Metro打包工具中的unstable_enablePackageExports功能。当启用此选项时，Metro会遵循Node.js的package.json中的"exports"字段来解析模块。axios库在其package.json中定义了不同的导出路径，包括针对Node环境的CommonJS版本（axios.cjs）和针对浏览器的ES模块版本。

在React Native环境中，我们实际上需要的是浏览器兼容版本，而不是Node.js版本。但由于启用了package exports功能，Metro可能会错误地选择Node.js版本的axios，从而导致上述错误。

解决方案

通过调整Metro配置中的条件名称解析顺序，可以强制Metro选择适合React Native环境的模块版本。具体解决方案如下：

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

const config = getDefaultConfig(__dirname);

config.resolver.unstable_enablePackageExports = true;
// 添加以下配置
config.resolver.unstable_conditionNames = [
  'browser',
  'require', 
  'react-native',
];

module.exports = config;

配置解析

unstable_conditionNames数组定义了模块解析时的条件名称优先级：

1. 'browser'：优先选择浏览器兼容版本
2. 'require'：支持CommonJS模块
3. 'react-native'：React Native特定环境

通过这样的配置顺序，Metro会优先选择适合React Native环境的模块版本，而不会错误地加载Node.js专用的axios版本。

注意事项

1. 这个解决方案适用于Metro 0.80.9及以上版本
2. 类似的配置方法也可以用于解决其他库的兼容性问题
3. 如果项目中使用的是Yarn 4.x版本，可能需要额外的配置来确保模块解析正确

总结

在React Native项目中使用Metro打包工具时，启用package exports功能可以带来更好的模块解析能力，但也可能导致一些兼容性问题。通过合理配置unstable_conditionNames，开发者可以确保工具链选择正确的模块版本，从而避免Node.js特定模块被错误加载的问题。