循环依赖引发ReferenceError: Cannot access before initialization问题咨询

问题重现 #

你遇到的是典型的ES模块循环依赖问题，先还原你的代码场景：

index.js

console.log("index.js loading...");
import express from "express";
export const app = express();
import { router as login } from "./login.js";
app.use("/login", login);

login.js

console.log("login.js loading...");
import express from "express";
import { app } from "./index.js";
import passport from "passport";
app.use(passport.initialize());

运行时抛出ReferenceError: Cannot access 'app' before initialization，且只打印了login.js loading...，完全没看到index.js的日志——明明index.js里已经写了export const app = express()，怎么还会说app没初始化？这确实容易让人困惑。

错误核心原因：循环依赖下的模块求值顺序 #

你误以为index.js的代码已经执行到了第三行，但实际上，index.js的代码根本还没开始执行！

ES模块的加载流程分为三个关键阶段：解析、实例化、求值，问题就出在求值阶段的顺序：

1. 当你以index.js为入口启动时，首先会解析它的依赖，发现需要加载login.js。
2. 解析login.js时，又发现它依赖index.js——形成循环依赖。此时JS引擎会标记index.js为「正在加载中」，不会重复解析，但会为index.js的导出变量（也就是app）创建一个空的绑定占位符。
3. 进入求值阶段后，JS引擎会优先去求值被导入的模块（login.js），因为要满足index.js的import需求。
4. 所以login.js的代码先执行：先打印日志，然后尝试访问从index.js导入的app——但此时index.js还没进入求值阶段，app的绑定占位符里还没有任何值，自然就抛出了「无法在初始化前访问」的错误。
5. 错误抛出后，整个执行流程终止，index.js的代码永远没机会执行，所以它的日志根本不会打印。

ES模块加载顺序的详细规则 #

ES模块的加载和执行严格遵循以下逻辑：

• 解析阶段：递归找出所有依赖模块，构建依赖图，遇到循环依赖时标记为「正在加载」，避免重复解析。
• 实例化阶段：为所有模块创建内存环境，给每个导出变量分配一个绑定位置（但不赋值），同时让import的变量直接指向对应模块的导出绑定——这一步是为了处理循环依赖时的引用问题，但此时变量都是未初始化的状态。
• 求值阶段：从入口模块开始，深度优先遍历依赖图，遇到未求值的模块就先去求值它。也就是说，只要模块A导入了模块B，不管有没有循环依赖，都会先求值模块B，再回来求值模块A。

这就是为什么你的login.js先执行，而index.js的代码完全没机会运行的原因。

如果index.js优先加载（求值）会怎样？ #

如果能让index.js先完成求值，app被成功初始化后再去加载login.js，那这个错误确实不会出现。但ES模块的求值顺序是由依赖关系决定的，只要index.js导入了login.js，就必然会先去求值login.js，除非你改变依赖结构：

比如你可以重构代码，把app的创建抽成一个独立模块，彻底打破循环依赖：
app.js

import express from "express";
export const app = express();

index.js

console.log("index.js loading...");
import { app } from "./app.js";
import { router as login } from "./login.js";
app.use("/login", login);

login.js

console.log("login.js loading...");
import express from "express";
import { app } from "./app.js";
import passport from "passport";
app.use(passport.initialize());

或者另一种更灵活的方式：让login.js导出一个初始化函数，由index.js传入app，而不是让login.js主动导入app：
login.js

console.log("login.js loading...");
import express from "express";
import passport from "passport";

export function initApp(app) {
  app.use(passport.initialize());
}

export const router = express.Router();
// ... 路由逻辑

index.js

console.log("index.js loading...");
import express from "express";
export const app = express();
import { router as login, initApp } from "./login.js";
initApp(app);
app.use("/login", login);

这两种方式都能避免循环依赖，让初始化顺序完全由入口模块控制，自然就不会再出现初始化错误了。

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