Vue3报错：Uncaught TypeError: 无法读取undefined的'default'属性

1. 语法错误（直接触发报错的原因） #

你的appHttpHeaders.js模块存在语法错误，导致模块无法正常解析，最终抛出Cannot read properties of undefined (reading 'default')：

• reactive()的大括号未闭合，且export default appHttpHeaders;被错误嵌套在reactive()的括号内部。

修正后的appHttpHeaders.js代码：

import { reactive } from "@vue/reactivity";
import { computed } from "vue";

import { appSession, appContext } from "@/store/reactives";

let appHttpHeaders = reactive({
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8',
    'brand': computed(() => appContext.brand),
    'X-Auth-Token': computed(() => appSession.authenticationToken),
    'Accept-Language': computed(() => appContext.locale === 'fr' ? 'fr_CA,fr;q=0.8' : 'en_CA,en;q=0.8')
}) // 补上reactive的闭合括号

export default appHttpHeaders; // 移到reactive代码块外部

2. 额外优化：Reactive对象中使用Computed的问题 #

Vue的reactive()会自动展开ref，但不会自动展开computed返回的ref，这意味着你后续访问appHttpHeaders.brand时拿到的是computed对象而非实际值。建议改用toRefs处理后再放入reactive：

import { reactive, toRefs } from "@vue/reactivity";
import { computed } from "vue";

import { appSession, appContext } from "@/store/reactives";

// 先定义所有计算属性
const computedHeaders = {
    brand: computed(() => appContext.brand),
    'X-Auth-Token': computed(() => appSession.authenticationToken),
    'Accept-Language': computed(() => appContext.locale === 'fr' ? 'fr_CA,fr;q=0.8' : 'en_CA,en;q=0.8')
}

let appHttpHeaders = reactive({
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8',
    ...toRefs(computedHeaders) // 用toRefs展开计算属性
})

export default appHttpHeaders;

3. 后续排查：循环依赖可能性 #

如果修正语法后仍报错，需检查是否存在循环依赖：比如appHttpHeaders导入了appSession/appContext，而这两个模块又间接导入了appHttpHeaders，导致webpack解析时模块未定义。可以通过抽离共享依赖到独立模块来解决。

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