如何解决Axios导入redux store报__WEBPACK_IMPORTED_MODULE_1__.default未定义错误

问题原因 #

• 路径错误：../app/store的相对路径和实际文件位置不匹配，导致导入的模块不存在，默认导出为undefined
• 循环依赖：你的Redux切片/异步逻辑中如果导入了当前的Axios实例，会形成store → 切片/Thunk → Axios实例 → store的循环依赖，模块加载时循环链路中的导出会被初始化为undefined
• 额外逻辑问题：你当前的写法只会在Axios实例初始化时读取一次token，后续Redux中token更新后，Axios的请求头不会自动同步最新值，而且redux-persist未完成持久化数据恢复时，读取到的token大概率为空

解决办法 #

1. 先确认导入路径正确性 #

核对store.js和api.js的文件目录层级，比如store.js放在src/app/store.js，api.js放在src/utils/api.js的话，../app/store的路径是正确的；如果层级不符调整路径即可，也可以配置打包工具将src设为根路径，使用import store from 'app/store'的绝对路径避免相对路径写错的问题。

2. 重构Axios实例逻辑，用请求拦截器动态获取token #

不要在模块顶层直接调用store.getState()，改为在请求拦截器中每次请求前读取最新的token，既解决token不会更新的问题，也能避免模块初始化阶段的循环依赖问题，修改后的api.js代码如下：

import axios from "axios";
import store from "../app/store";

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
});

// 添加请求拦截器动态注入token
api.interceptors.request.use(
  (config) => {
    const token = store.getState().auth.token;
    if (token) {
      // 若后端要求Bearer前缀则保留，否则直接赋值为token即可
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default api;

3. 确认redux-persist配置正确 #

在项目入口文件确保你已经用PersistGate包裹了根组件，等待持久化数据恢复完成后再渲染应用，避免初始化阶段读取到的token为空，示例入口代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';
import store from './app/store';
import App from './App';

const persistor = persistStore(store);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    {/* loading可替换为自定义的加载态组件 */}
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

4. 彻底解决循环依赖 #

如果调整后仍然有循环依赖问题，检查你的Redux切片、Thunk异步逻辑中是否导入了当前的Axios实例，可将异步逻辑中Axios实例的导入改为运行时按需导入，或者将公共请求逻辑抽离避免互相导入。

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