Vite开发模式报错：Cannot access 'usersApi' before initialization 问题求助

问题原因 #

这个报错本质是ES模块循环依赖导致的：虽然你已经在文件顶部导入了usersApi，但如果usersApi所在的文件，在自身的加载初始化过程中，反过来依赖你当前这个文件、或者依赖链上的其他文件最终绕回依赖当前文件，就会出现模块还没完成初始化就被引用的情况。Vite基于原生ES模块的加载逻辑比webpack更严格，会直接暴露这类隐藏的循环依赖问题。

解决方案 #

• 第一步：确认循环依赖
  先排查../../../user/api/usersApi的导入链：检查usersApi文件中是否直接/间接导入了你当前编写的这个redux状态文件。你也可以直接在两个文件顶部加打印语句验证加载顺序：

  // usersApi.ts 顶部加
  console.log('usersApi 模块加载完成')
  
  // 当前文件顶部加
  console.log('当前模块加载，usersApi 值为：', usersApi)
  

  如果当前文件的打印先触发、且usersApi是undefined，就可以确认是循环依赖问题。

• 第二步：临时修复验证
  不要在模块顶层直接引用usersApi的属性，改成运行时延迟取值，即可临时解决报错：

  import {getMinimalAsyncStoreState} from "../../../core/redux/reduxUtils";
  import {asyncReduxAutomator} from "../../../core/redux/asyncReduxAutomator";
  import usersApi from "../../../user/api/usersApi";
  
  const initialState = getMinimalAsyncStoreState<null>(null);
  
  // 把方法引用包成函数，执行时才会读取usersApi的属性
  const getSendCodeApi = () => usersApi.sendPhoneValidationCode
  
  const sendPhoneValidationCodeReduxStateNS = asyncReduxAutomator<undefined, null>(
    "sendPhoneValidationCode",
    getSendCodeApi(),
    initialState,
    "basic"
  );
  
  export default sendPhoneValidationCodeReduxStateNS;
  

  也可以直接修改asyncReduxAutomator的实现，支持传入方法getter函数，内部执行时再读取真实方法，避免顶层引用。

• 第三步：根治方案
  梳理依赖逻辑打断循环：把两个模块共用的类型、状态、工具方法抽离到独立的第三方文件，让usersApi和当前文件都依赖这个公共文件，避免互相引用。

如果仅开发环境出现该报错、生产构建正常，也可以临时关闭React插件的快速刷新验证问题：

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react({ fastRefresh: false })]
})

注意该方法仅做验证用，还是建议从根源解决循环依赖问题。

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