React配置Axios拦截器后调用.get报错：该方法不是函数，求排查

已花费数小时排查React项目中的Axios拦截器问题，期望配置拦截器在请求中携带token，但运行时出现错误，以下是相关代码及错误信息，请求指出错误原因。

拦截器代码（axiosHandler.js） #

import axios from "axios";

const axiosHandler = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
  headers: {
    Accept: "application/json",
  },
});

axiosHandler.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");
    if (token) {
      config.headers["Authorization"] = "Bearer " + token;
    }
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);

//axiosHandler.interceptors.response

export default axiosHandler;

组件调用代码 #

import axiosHandler from "../services/axiosHandler";

const getData = async () => {
    await axiosHandler
      .get(`/path`)
      .then((response) => {
        //do something
      })
  };

错误信息 #

services_axiosHandler__WEBPACK_IMPORTED_MODULE_0_.get is not a function

错误原因及修复方案 #

1. 拦截器错误回调未返回Promise
   请求拦截器的错误处理函数中，仅调用了Promise.reject(error)但未返回，这会导致拦截器链异常，虽不是直接触发get is not a function的原因，但需先修复：

   axiosHandler.interceptors.request.use(
     (config) => {
       const token = localStorage.getItem("token");
       if (token) {
         config.headers["Authorization"] = "Bearer " + token;
       }
       return config;
     },
     (error) => {
       return Promise.reject(error); // 添加return
     }
   );
   

2. 文件导入/导出路径问题
   检查组件中导入路径../services/axiosHandler是否正确：

   • 确认文件名拼写、大小写与实际文件一致（Linux/macOS区分文件名大小写）
   • 确认文件层级关系正确，比如services文件夹是否在组件的上级目录

3. Webpack缓存异常
   开发环境下Webpack缓存可能导致模块导出异常，解决方法：

   • 重启React开发服务器
   • 删除项目根目录下的node_modules/.cache文件夹（若存在）后重新启动

4. Axios版本兼容性问题
   低版本Axios可能存在axios.create()实例方法缺失的情况：

   • 运行npm list axios查看当前版本
   • 若版本过旧，执行npm install axios@latest升级到最新稳定版

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