在AWS Amplify部署应用时，使用styled-jsx的文件报未知jsx属性错误

部署AWS Amplify应用时，所有使用styled-jsx的文件出现如下错误：

问题原因 #

AWS Amplify默认构建环境未配置styled-jsx所需的Babel插件，编译器无法识别styled-jsx的特殊属性（如jsx、global），因此抛出“未知JSX属性”错误。

解决方案 #

• 配置Babel支持styled-jsx
  在项目根目录创建或修改babel.config.json（或.babelrc），添加styled-jsx的Babel插件：

  {
    "presets": ["next/babel"], // 若为Next.js项目使用该预设；其他框架替换为对应预设（如@babel/preset-react）
    "plugins": ["styled-jsx/babel"]
  }
  

  若项目未安装babel-plugin-styled-jsx，执行以下命令安装依赖：

  npm install --save-dev babel-plugin-styled-jsx
  

• 检查Amplify构建配置
  打开amplify.yml文件，确保构建命令正确且未覆盖Babel配置，示例配置如下（以Next.js为例）：

  version: 1
  frontend:
    phases:
      preBuild:
        commands:
          - npm install
      build:
        commands:
          - npm run build
    artifacts:
      baseDirectory: .next
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*
  

  其他框架需调整baseDirectory为对应构建输出目录。

• 本地预构建验证
  先在本地执行npm run build，确认无错误后再推送代码至Amplify，排除本地代码问题。

• 清理Amplify缓存重新部署
  登录Amplify控制台，进入对应应用的构建页面，点击「Redeploy this version」并勾选「Clear cache」，避免旧配置残留影响构建。

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