JavaScript模块导出常量提示未初始化错误的解决方法咨询

嗨，我最近在处理JavaScript模块导出的问题时遇到了挺头疼的状况，折腾了好几个小时才找到临时解决办法，想跟大家聊聊这个情况：

问题场景 #

我有一个工具模块utils.js，代码如下：

// utils.js
const FOO = '42';
const bar = function() {};
const baz = () => {};
function qux() {}
export { FOO, bar, baz, qux }

之后在另一个文件里通过命名空间导入整个模块：

import * as utils from './utils.js';
console.log(utils);

打印出来的模块对象里，前三个导出项居然都是<uninitialized>状态：

[Module: null prototype] {
FOO: ,
bar: ,
baz: ,
qux: [Function: qux],
}

当我尝试使用FOO、bar或者baz的时候，都会触发ReferenceError: Cannot access '<>' before initialization的错误。

初步调整的效果 #

一开始我把bar和baz改成了标准的函数声明形式：

function bar() {}
function baz() {}

修改后，关于bar和baz的初始化错误就消失了，但FOO这个常量的问题依然存在。

最终解决方式 #

最后我换了个思路，把常量FOO包装成了一个函数：

function getFoo() { return 42 }

然后导出这个函数，在需要使用的地方调用getFoo()来获取值，没想到这个方法直接解决了报错问题。

补充说明 #

我仔细检查过，代码里不存在循环依赖的情况。不过因为项目代码结构的原因，我很难复现出一个最小可运行的示例来定位根因。虽然我知道肯定是代码里某个细节导致了这个初始化顺序的问题，但目前通过把常量包装成函数的方式确实解决了眼前的报错。

内容来源于stack exchange