Vue中引入的authenticationService为undefined是什么原因？

问题表现 #

FormLogin组件提交表单时控制台抛出错误，断点调试确认组件内从@/container.js导入的authenticationService值为undefined，涉及代码包含FormLogin组件、全局DI容器配置、AuthenticationService服务实现三个部分。

根因定位与修复 #

1. 显性代码错误：错误使用new调用箭头函数 #

你写的AuthenticationService是箭头函数形式的工厂函数，没有构造器能力，根本不支持new调用，现有container.js里的写法会直接抛类型错误：

// container.js 错误写法
export function authenticationService () {
    return new AuthenticationService(api, tokenRepository)
}

JS里箭头函数没有[[Construct]]内部槽，用new调用箭头函数会直接报TypeError: AuthenticationService is not a constructor，如果这个错误被Vue的错误边界、或者全局错误拦截吞掉，表象就会是导入的服务值为undefined。
修复很简单，去掉new，直接调用工厂函数就行：

// container.js 修复后写法
export function authenticationService () {
    return AuthenticationService(api, tokenRepository)
}

2. 最高概率隐蔽问题：模块循环依赖 #

排查@/store以及其下引用的account等子模块，有没有反向导入@/container.js里内容的情况。
ES模块加载是按顺序静态执行的，当前场景的加载链路是：组件加载→导入container.js→container导入AuthenticationService→AuthenticationService导入store，如果这时候store反过来导入container.js里的服务，container.js还没执行到导出authenticationService的语句，导入方拿到的就会是undefined。
修复方式：打破循环引用链路，不要在store的依赖链里反向导入DI容器的服务，把公共依赖提前抽离成独立模块，或者把服务实例当参数传入调用方，从结构上避免模块互相引用。

3. 路径大小写匹配问题 #

在Linux、开启大小写敏感的MacOS等环境里，导入路径必须和实际文件名完全一致：

• 确认@/container.js的实际文件名、路径和导入语句完全匹配，比如有没有实际是Container.js大写开头、或者是container/index.js目录结构但导入时没写全路径的情况
• 确认@/services/AuthenticationService.js的文件名大小写和导入语句一致，路径错误会导致导入值为undefined，直接阻断container.js后续的导出逻辑。

4. 依赖导入不规范问题 #

组件里从@vue/reactivity单独导入ref的写法不符合Vue3的官方规范，正常响应式API需要从vue主包导入，单独引入子包可能导致依赖实例不一致，极端场景下会阻断整个script块的加载：

// 修正前
import { ref } from '@vue/reactivity'
// 修正后
import { ref } from 'vue'

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