AWS CodeBuild构建React应用失败：stylis-plugin-rtl报TypeError

问题分析 #

本地执行yarn build正常，但AWS CodeBuild报错TypeError: 无法读取undefined的属性'0'，出现在stylis-plugin-rtl/dist/stylis-rtl.js中，这类问题大多源于构建环境依赖不一致或缓存导致的依赖加载异常——本地有完整的依赖缓存，而CodeBuild环境可能存在依赖安装不完整、版本不匹配的情况。

具体解决方案 #

1. 强制清理环境并重新安装依赖 #

在buildspec.yml中添加清理步骤，确保每次构建从干净状态开始，避免缓存干扰：

version: 0.2
phases:
  install:
    commands:
      - yarn cache clean --force  # 使用npm则替换为npm cache clean --force
      - rm -rf node_modules yarn.lock  # npm对应删除package-lock.json
      - yarn install --frozen-lockfile  # npm对应npm ci
  build:
    commands:
      - yarn build

用--frozen-lockfile（npm用ci）可以强制依赖版本和本地完全一致，避免CodeBuild拉取不匹配的依赖版本。

2. 匹配stylis与stylis-plugin-rtl的版本 #

stylis-plugin-rtl的版本需要和项目中stylis的版本兼容：

• 先查看本地stylis版本：

  yarn list stylis  # npm对应npm list stylis
  

• 如果stylis是3.x版本，安装stylis-plugin-rtl 1.x分支；如果是4.x版本，安装2.x分支，例如：

  yarn add stylis-plugin-rtl@1.5.0  # 对应stylis 3.x
  

3. 强制设置生产环境变量 #

在CodeBuild的构建阶段明确设置NODE_ENV，确保构建逻辑和本地生产构建一致：

build:
  commands:
    - export NODE_ENV=production
    - yarn build

4. 检查CodeBuild环境变量配置 #

确认CodeBuild中没有设置干扰依赖安装的自定义环境变量（如NODE_OPTIONS、npm/yarn镜像地址等），这类变量可能导致依赖安装异常。

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