记录一次引入循环，导致undefined

是什么

循环依赖(Circular dependency)是指在模块系统中，两个或多个模块形成相互引用的依赖关系。这种情况会导致模块加载和初始化过程变得复杂且难以预测。

循环依赖示例

如下图所示，循环依赖可以是直接的相互引用，也可以是间接的依赖环：

flowchart TD subgraph "循环依赖结构" ModuleA((模块A)) -->|导入| ModuleB((模块B)) ModuleB -->|导入| ModuleA end subgraph "间接循环依赖" ModC((模块C)) -->|导入| ModD((模块D)) ModD -->|导入| ModE((模块E)) ModE -->|导入| ModC end

循环依赖引发的常见问题

flowchart TD subgraph "引发问题" Problems[循环依赖] --> P1[未完成的对象初始化] Problems --> P2[undefined值] Problems --> P3[执行顺序不可预测] Problems --> P4[调试困难] end

问题详解

未完成的对象初始化：模块在被完全初始化前就被引用，导致访问到不完整的对象
undefined值：尝试访问尚未定义的导出，导致运行时错误
执行顺序不可预测：不同的模块系统处理循环依赖的方式不同，造成代码行为难以预测
调试困难：错误堆栈跟踪混乱，难以定位问题根源

为什么？

flowchart TD subgraph "模块加载过程" Start[开始加载] --> LoadA[开始加载模块A] LoadA --> A1[解析模块A的依赖] A1 --> A2[发现模块A依赖模块B] A2 --> LoadB[开始加载模块B] LoadB --> B1[解析模块B的依赖] B1 --> B2[发现模块B依赖模块A] B2 --> Decision{模块系统如何处理?} Decision -->|CommonJS| CJS[返回未完成的A] CJS --> B3[完成模块B的初始化] B3 --> A3[继续模块A的初始化] A3 --> Done[加载完成] Decision -->|ES Modules| ESM[完成构造阶段] ESM --> ESM2[执行模块A代码] ESM2 --> ESM3[执行模块B代码] ESM3 --> Done Decision -->|未处理| Error[运行时错误] end

如何解决？

方法	示例	说明
✅ 延迟加载	`require()` 写到函数内部	避免初始化阶段访问未定义
✅ 提取公共模块	建立 shared.js	A 和 B 不直接依赖彼此
✅ 重构依赖方向	抽象高层逻辑模块	减少相互耦合

实际案例分析

现象

当从工单列表进入工单详情时，导致页面展示空白。代码报错：

jsx 复制代码

hook.js:608 TypeError: _pages_cashRegister_ThirdPlatformService_SinopecCompService__WEBPACK_IMPORTED_MODULE_16__.SinopecCompService is not a constructor
    at ./src/pages/cashRegister/ThirdPlatformService/service.js (service.js:12:68)
    at __webpack_require__ (bootstrap:853:1)
    at fn (bootstrap:150:1)
    at ./src/class/cashRegister/GatheringInfo.js (42.js:725:107)
    at __webpack_require__ (bootstrap:853:1)
    at fn (bootstrap:150:1)
    at ./src/class/cashRegister/index.js (index.js:1:1)
    at __webpack_require__ (bootstrap:853:1)
    at fn (bootstrap:150:1)
    at ./src/pages/cashRegister/ThirdPlatformService/SinopecCompService.js (42.js:3437:78)
overrideMethod @ hook.js:608
s2.f6yc.comnull/:1

定位过程

错误日志中关键信息：

_pages_cashRegister_ThirdPlatformService_SinopecCompService__WEBPACK_IMPORTED_MODULE_16__.SinopecCompService is not a constructor

报错位置在：

at ./src/pages/cashRegister/ThirdPlatformService/service.js (service.js:12:68)

调试过程

我们将断点打到SinopecCompService对象上面：

得到以下的堆栈，分析调用问题：

jsx 复制代码

./src/pages/cashRegister/ThirdPlatformService/service.js (service.js:13)
__webpack_require__ (bootstrap:853)
fn (bootstrap:150)
./src/class/cashRegister/GatheringInfo.js (42.js:725)
__webpack_require__ (bootstrap:853)
fn (bootstrap:150)
./src/class/cashRegister/index.js (index.js:1)
__webpack_require__ (bootstrap:853)
fn (bootstrap:150)
./src/pages/cashRegister/ThirdPlatformService/SinopecCompService.js (42.js:3437)
__webpack_require__ (bootstrap:853)
fn (bootstrap:150)
./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/pages/newMaintain/pages/ViewDetail/index.vue?vue&type=script&lang=js& (NewMaintainDetailView.js:1028)
__webpack_require__ (bootstrap:853)
fn (bootstrap:150)
./src/pages/newMaintain/pages/ViewDetail/index.vue?vue&type=script&lang=js& (index.vue:1)
__webpack_require__ (bootstrap:853)
fn (bootstrap:150)
./src/pages/newMaintain/pages/ViewDetail/index.vue (index.vue:1)
__webpack_require__ (bootstrap:853)....

通过调用堆栈，分析出循环依赖路径：

从ViewDetail/index.vue开始，导入了SinopecCompService.js
然后SinopecCompService.js导入了Payment类from '@/class/cashRegister'

class/cashRegister/index.js中导出了GatheringInfo等模块

jsx 复制代码

export { GatheringInfo } from './GatheringInfo'
export { GatheringConfig } from './GatheringConfig'
export { Payment } from './Payment'
export { CzkCard } from './CzkCard'
export { Coupon } from './Coupon'

GatheringInfo.js导入了service.js中的hiddenPayment

jsx 复制代码

import { hiddenPayment } from '@/pages/cashRegister/ThirdPlatformService/service'

最后service.js又导入了SinopecCompService，从而形成了循环依赖

分析过程如图：

解决方案

解决方法很简单：将原先从ViewDetail/index.vue开始导入SinopecCompService.js的逻辑移出去，打破循环依赖链。