Axios 1.5.1在NX Workspace+React Native中URL undefined问题求助

在NX Workspace中开发React Native 0.72.3版本应用时，使用Axios 1.5.1遇到运行错误，将Axios降级至0.27.2版本后应用恢复正常运行。想咨询该问题的具体原因，或是是否缺少相关配置？

以下是项目的package.json代码：

{
  "name": "@sampleapp/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.19.2",
    "@react-native-community/netinfo": "^9.4.1",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "axios": "^1.5.1",
    "formik": "^2.4.3",
    "promise": "^8.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-base64": "^0.2.1",
    "react-native-crypto-js": "^1.0.0",
    "react-native-elements": "^3.4.3",
    "react-native-encrypted-storage": "^4.0.3",
    "react-native-popover-view": "^5.1.2",
    "react-native-safe-area-context": "^4.7.1",
    "react-native-screens": "^3.24.0",
    "react-native-toast-message": "^2.1.6",
    "react-native-vector-icons": "^10.0.0",
    "tslib": "^2.3.0",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.14.5",
    "@nx/detox": "16.6.0",
    "@nx/eslint-plugin": "16.6.0",
    "@nx/jest": "16.6.0",
    "@nx/js": "16.6.0",
    "@nx/linter": "16.6.0",
    "@nx/react-native": "16.6.0",
    "@nx/workspace": "16.6.0",
    "@react-native-community/cli": "11.3.5",
    "@react-native-community/cli-platform-android": "11.3.5",
    "@react-native-community/cli-platform-ios": "11.3.5",
    "@react-native/metro-config": "^0.72.9",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/jest-native": "5.4.2",
    "@testing-library/react-native": "12.1.2",
    "@types/jest": "^29.4.0",
    "@types/node": "18.14.4",
    "@types/react": "18.0.28",
    "@types/react-native": "0.72.2",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "babel-jest": "^29.4.1",
    "detox": "^20.11.1",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "jest": "^29.4.1",
    "jest-circus": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-react-native": "18.0.0",
    "metro": "0.76.7",
    "metro-babel-register": "0.76.7",
    "metro-config": "0.76.7",
    "metro-react-native-babel-preset": "0.76.7",
    "metro-react-native-babel-transformer": "0.76.7",
    "metro-resolver": "0.76.7",
    "nx": "16.6.0",
    "nx-cloud": "latest",
    "prettier": "^2.6.2",
    "react-native-svg": "13.9.0",
    "react-native-svg-transformer": "1.0.0",
    "react-test-renderer": "18.2.0",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.1.3"
  },
  "nx": {
    "targets": {}
  }
}

核心原因推测 #

1. ES模块兼容性问题
   Axios从0.27.x升级到1.x后默认采用ES模块输出，但React Native 0.72.x的Metro打包器对ES模块的处理存在兼容性缺口，再加上NX Workspace的Monorepo结构，模块解析逻辑更复杂，容易出现找不到模块、语法解析失败等错误。

2. 依赖树冲突
   Axios 1.5.1依赖的follow-redirects、form-data等核心包版本，可能与项目中现有依赖（如react-native-elements或其他网络相关库）存在冲突，导致运行时出现未预期的错误。

3. Axios API破坏性变更
   Axios 1.x系列对部分API做了破坏性调整，比如请求配置结构、拦截器写法、响应处理逻辑、取消请求的实现（从CancelToken改为AbortController）等。如果代码仍沿用0.27.x的旧写法，升级后会直接报错。

4. NX Workspace配置适配问题
   NX的Monorepo构建规则可能未正确适配Axios 1.x的模块导出方式，导致打包时无法正确解析Axios的入口文件，进而引发运行错误。

解决方法（无需降级Axios） #

• 配置Metro支持ES模块
  在项目的metro.config.js中添加Axios的转译配置：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    extraNodeModules: {
      axios: require.resolve('axios'),
    },
  },
  transformer: {
    babelTransformerPath: require.resolve('metro-react-native-babel-transformer'),
  },
});

同时确保Babel配置中包含@babel/plugin-transform-modules-commonjs插件，将ES模块转为CommonJS供Metro识别。

• 适配Axios 1.x API
  对照Axios官方文档，检查代码中是否存在需要修改的旧API写法，比如拦截器的响应处理、取消请求的逻辑等。

• 清理依赖缓存
  执行以下命令清理NX和React Native的依赖缓存：

nx reset
rm -rf node_modules package-lock.json yarn.lock
npm install
cd ios && pod install && cd ..

• 使用React Native适配版Axios
  尝试安装专门为React Native优化的axios-react-native包，可能直接解决兼容性问题。

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