Astro项目AWS Amplify构建失败：timeZoneName=shortGeneric取值报错

问题描述 #

我在Astro项目中使用Intl.DateTimeFormat格式化日期，在src/utils/constants.ts里将timeZoneName配置为shortGeneric，本地运行及构建均正常，但推送代码至AWS Amplify后触发的构建失败，报错信息为：Value shortGeneric out of range for Intl.DateTimeFormat options property timeZoneName。

现咨询两个问题：

1. 此问题属于Astro还是AWS Amplify的问题？
2. 如何在不修改timeZoneName属性的前提下修复该构建错误？

相关代码文件 #

src/pages/about.astro

---
import Layout from '../layouts/BlogPost.astro';

---

<Layout title="About Me" description="about keshav mohta" pubDate={new Date()} updatedDate={new Date()} heroImage="/placeholder-about.jpg">
  <p>I am from India.</p>
</Layout>

src/layouts/blogPost.astro

---
import type { CollectionEntry } from 'astro:content';
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
import Header from '../components/Header.astro';
import Waqt from '../components/Waqt.astro';

type Props = CollectionEntry<'blog'>['data'];

const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
---

<html lang="en">
  <head>
    <BaseHead title={title} description={description} />
    <style>
      .title {
        font-size: 2em;
        margin: 0.25em 0 0;
      }
      hr {
        border-top: 1px solid #ddd;
        margin: 1rem 0;
      }
      .created-on,
      .last-updated-on {
        font-style: italic;
      }
    </style>
  </head>

  <body>
    <Header />
    <main>
      <article>
        {heroImage && <img width={720} height={360} src={heroImage} alt="" />}
        <h1 class="title">{title}</h1>
        {
          pubDate && (
            <div class="created-on">
              Created on <Waqt date={pubDate} />
            </div>
          )
        }
        {
          updatedDate && (
            <div class="last-updated-on">
              Last updated on <Waqt date={updatedDate} />
            </div>
          )
        }
        <hr />
        <slot />
      </article>
    </main>
    <Footer />
  </body>
</html>

src/components/waqt.astro

---
const { date } = Astro.props;
import { fullEnglish } from '../utils/constants';

const fullDate = new Intl.DateTimeFormat('en-us', fullEnglish);
---
<time date={date.toISOString()}>
  <p>{fullDate.format(date)}</p>
</time>
<style>
  p {
    display: inline-block;
    background-color: #daccec;
    color: #171205;
    font-weight: 400;
    padding-inline: 0.25rem;
  }
</style>

src/utils/constants.ts

export const fullEnglish = {
    weekday: 'long',
    dayPeriod: 'long',
    year: 'numeric',
    month: 'long',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: 'numeric',
    calendar: 'iso8601',
    timeZone: 'Asia/Kolkata',
    timeZoneName: 'shortGeneric',
    formatMatcher: 'basic',
    hourCycle: 'h12',
};

构建失败日志 #

error   Value shortGeneric out of range for Intl.DateTimeFormat options property timeZoneName
                                    File:
                                    /codebuild/output/src3509046262/src/blog/dist/chunks/pages/all.9e0b5840.mjs:185:20
                                    Code:
                                    184 |   const { date } = Astro2.props;
                                    > 185 |   const fullDate = new Intl.DateTimeFormat("en-us", fullEnglish);
                                    |                    ^
                                    186 |   return renderTemplate`${maybeRenderHead($$result)}<waqt class="astro-PPPFFICK">
                                    187 |   <p class="astro-PPPFFICK">${fullDate.format(date)}</p>
                                    188 | </waqt>`;
                                    Stacktrace:
                                    RangeError: Value shortGeneric out of range for Intl.DateTimeFormat options property timeZoneName
                                    at new DateTimeFormat (<anonymous>)
                                    at file:///codebuild/output/src3509046262/src/blog/dist/chunks/pages/all.9e0b5840.mjs:185:20
                                    at AstroComponentInstance.Waqt [as factory] (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:390:12)
                                    at AstroComponentInstance.init (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:1044:29)
                                    at AstroComponentInstance.render (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:1049:18)
                                    at render.next (<anonymous>)
                                    at renderChild (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:1106:18)
                                    at async RenderTemplateResult.[Symbol.asyncIterator] (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:772:7)
                                    at async renderAstroTemplateResult (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:780:20)
                                    at async renderChild (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:1104:5)
                                    at async RenderTemplateResult.[Symbol.asyncIterator] (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:772:7)
                                    at async renderAstroTemplateResult (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:780:20)
                                    at async renderChild (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:1104:5)
                                    at async AstroComponentInstance.render (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:1058:7)
                                    at async renderChild (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:1106:5)
                                    at async RenderTemplateResult.[Symbol.asyncIterator] (file:///codebuild/output/src3509046262/src/blog/dist/chunks/astro.2fb2ca80.mjs:772:7)
                                    at async renderAstroTemplateResult (file:///codebuild/output/src3509046262/src/blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:37:20)
                                    at async read (file:///codebuild/output/src3509046262/src/blog/node_modules/astro/dist/runtime/server/render/page.js:106:32)

问题解答 #

1. 问题归属 #

这既不是Astro也不是AWS Amplify的问题，本质是Node.js版本兼容性问题。shortGeneric是ECMAScript 2021新增的timeZoneName选项值，本地环境使用的Node.js版本支持该特性，但AWS Amplify默认构建环境的Node.js版本较旧，不支持这个新选项，因此抛出范围错误。

2. 不修改timeZoneName的修复方案 #

方案1：升级AWS Amplify的Node.js版本

在项目根目录创建amplify.yml文件，指定构建使用支持ES2021的Node.js版本（如v16及以上）：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 18
        - nvm use 18
    build:
      commands:
        - npm install
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Amplify构建时会切换到指定的高版本Node.js，原生支持shortGeneric选项。

方案2：引入Intl Polyfill兼容旧版本

如果无法升级Node.js版本，可通过polyfill补充对shortGeneric的支持：

1. 安装依赖：

npm install @formatjs/intl-datetimeformat

2. 在项目入口文件（如src/utils/constants.ts顶部）引入polyfill：

import '@formatjs/intl-datetimeformat/polyfill';
import '@formatjs/intl-datetimeformat/locale-data/en'; // 引入英文 locale 数据

polyfill会在旧版本Node.js环境中提供shortGeneric的兼容实现。

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