解决_axios.default.get is not a function错误：React项目Axios CJS格式问题

问题根源 #

你的项目中Webpack对Axios这类混合ESM/CJS格式的模块解析异常，加上自定义Babel规则误处理了CJS文件，导致Axios的导出结构被破坏，无法正确获取default.get方法。

解决方案 #

修改config-override.js，调整模块解析规则并优化Babel处理逻辑：

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')

const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(appDirectory, relativePath)

const appIncludes = [
  resolveApp('src'),
  resolveApp('../components/src'),
]

module.exports = function override(config, env) {
  // 移除ModuleScopePlugin
  config.resolve.plugins = config.resolve.plugins.filter(
    plugin => plugin.constructor.name !== 'ModuleScopePlugin'
  )

  // 调整模块解析规则，适配Axios的混合模块格式
  config.resolve = {
    ...config.resolve,
    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx', '.cjs', '.mjs'],
    mainFields: ['browser', 'module', 'main'],
    conditionNames: ['browser', 'import', 'require']
  }

  // 更新源码目录的编译范围
  config.module.rules[0].include = appIncludes
  config.module.rules[1].oneOf[1].include = appIncludes
  config.module.rules[1].oneOf[3].options.plugins = [
    require.resolve('babel-plugin-react-native-web'),
  ].concat(config.module.rules[1].oneOf[3].options.plugins)

  // 调整Babel规则，避免误处理CJS格式的依赖模块
  config.module.rules.push({
    test: /\.(js|mjs)$/, // 移除cjs后缀，不处理第三方依赖的CJS文件
    exclude: /(@babel(?:\/|\\{1,2})runtime|node_modules[/\\](?!react-native.))/,
    use: {
      loader: "babel-loader",
      options: {
        babelrc: false,
        configFile: false,
        presets: [
          "@babel/preset-react",
          "@babel/preset-flow",
          "@babel/preset-typescript",
          "module:metro-react-native-babel-preset"
        ],
        plugins: [
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-proposal-object-rest-spread"
        ]
      }
    }
  })

  // 强制使用Axios编译好的浏览器版本，绕开模块解析问题
  config.plugins.push(
    new webpack.NormalModuleReplacementPlugin(/axios$/, resource => {
      resource.request = resource.request.replace(/axios$/, 'axios/dist/axios.min.js');
    }),
    new webpack.DefinePlugin({ __DEV__: env !== 'production' })
  )

  config.module.rules = config.module.rules.filter(Boolean)

  return config
}

关键修改说明 #

1. 模块解析优化：通过mainFields和conditionNames让Webpack优先识别Axios针对浏览器环境的导出配置，避免解析错误。
2. Babel规则调整：移除对.cjs文件的处理，防止第三方依赖的CJS模块被错误转译，破坏原有导出结构。
3. 强制替换Axios版本：直接使用Axios预编译的浏览器版文件，彻底绕开模块格式解析问题。

额外检查 #

确保项目中Axios的导入方式为默认导入：

import axios from 'axios';
// 避免使用 import * as axios from 'axios'; 或命名导入

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