如何解决路由文件拆分时循环导入导致的MenuItem初始化前访问报错

问题根因 #

这是ES模块循环依赖场景下的典型初始化时序问题：

• 你用function声明的createRoute存在函数提升特性，在模块解析阶段就已经完成初始化，因此不会报错
• MenuItem是const声明的常量，必须执行到对应赋值代码行才会完成初始化
• 你的代码执行顺序为：routes.js启动加载→导入语句提升优先执行→加载routesSettings.js→routesSettings.js从routes.js导入MenuItem→此时routes.js还没执行到MenuItem的赋值行，因此抛出初始化错误

另外你代码里还存在一个隐性问题：MenuItem枚举中没有定义SETTINGS_PASSWORD、SETTINGS_USER两个属性，就算解决初始化问题也会出现取值为undefined的问题，需要先补上。

可保留架构的解决方案 #

方案1：抽离公共常量（最推荐） #

将全局通用的枚举、工具函数抽成单独的公共文件，从根源上消除循环依赖：

1. 新建constants.js文件：

// constants.js
export const MenuItem = Object.freeze({
    HOME: "Home",
    SETTINGS: "Settings",
    SETTINGS_PASSWORD: "SettingsPassword",
    SETTINGS_USER: "SettingsUser"
});

export function createRoute(name, route, component) {
    return { name, route, component };
}

2. 两个路由文件都从constants.js导入依赖即可，无需再互相导入。

方案2：路由数组改为函数式返回 #

如果不想新增文件，可以把顶层直接初始化的路由数组改成函数导出，等所有模块初始化完成后再调用生成路由：
修改routes.js代码：

import Home from "../pages/Home";
import Settings from "../pages/settings";

import { routesSettings } from "./routesSettings"

export const MenuItem = Object.freeze({
    HOME: "Home",
    SETTINGS: "Settings",
    SETTINGS_PASSWORD: "SettingsPassword",
    SETTINGS_USER: "SettingsUser"
});

export function createRoute(name, route, component) {
    return { name, route, component };
}

// 改为函数导出，调用时才执行内部代码，此时所有依赖都已初始化完成
export function getRoutes() {
    return [
        createRoute(MenuItem.HOME, "/", Home),
        createRoute(MenuItem.SETTINGS, "/settings", Settings),
        ...routesSettings,
    ]
}

业务侧使用路由时调用getRoutes()即可拿到完整路由数组。

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