Astro项目pages/[lang]目录使用import.meta.env报Unexpected "export"错误

问题原因 #

在Astro的动态路由页面（pages/[lang]）中，你将路由导出函数getStaticPaths放在了非导出的顶层代码（环境变量声明、lang变量计算等）之后。Astro的页面解析器对路由函数的位置有严格要求——它需要优先识别getStaticPaths这类构建时执行的路由逻辑，后续再处理页面渲染阶段的顶层代码。这种代码顺序会导致解析器抛出"Unexpected 'export'"错误。而components目录下的文件没有路由导出函数，所以不会触发这个问题。

解决方法 #

调整代码顺序，将getStaticPaths函数放在所有非导入的顶层代码即可：

---
import {getLangFromUrl, useTranslations} from '../../i18n/utils'
import {languages} from '../../i18n/ui'

// 先导出路由构建函数
export async function getStaticPaths() {
    return languages.map((lang) => {
        return {params: {lang}}
    })
}

// 再声明页面渲染时需要的变量
const DOMAIN = import.meta.env.PUBLIC_DOMAIN
const lang = getLangFromUrl(Astro.url)
const t = useTranslations(lang)
---
<!-- 页面模板内容 -->

如果你的DOMAIN变量需要在getStaticPaths中使用，也可以直接在函数内部访问环境变量：

---
import {getLangFromUrl, useTranslations} from '../../i18n/utils'
import {languages} from '../../i18n/ui'

export async function getStaticPaths() {
    // 在路由函数内部直接访问环境变量
    const DOMAIN = import.meta.env.PUBLIC_DOMAIN
    return languages.map((lang) => {
        return {params: {lang}}
    })
}

const lang = getLangFromUrl(Astro.url)
const t = useTranslations(lang)
---

内容的提问来源于stack exchange，提问作者Nghĩa Phạm