通过AWS Amplify部署React+TS+Vite应用时遇引擎及编译错误

本地使用Node v20.9.0、npm v10.1.0初始化的React+TypeScript(Vite)应用，部署到AWS Amplify时出现以下错误日志：

# Starting phase: preBuild
                                 # Executing command: npm ci
2024-02-02T04:35:08.224Z [WARNING]: npm
2024-02-02T04:35:08.224Z [WARNING]: WARN EBADENGINE Unsupported engine {
                                    npm WARN EBADENGINE   package: 'rollup@4.9.6',
                                    npm WARN EBADENGINE   required: { node: '>=18.0.0', npm: '>=8.0.0' },
                                    npm WARN EBADENGINE   current: { node: 'v16.19.0', npm: '8.19.3' }
                                    npm WARN EBADENGINE }
2024-02-02T04:35:08.225Z [WARNING]: npm WARN
2024-02-02T04:35:08.225Z [WARNING]: EBADENGINE Unsupported engine {
                                    npm WARN EBADENGINE   package: 'vite@5.0.12',
                                    npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },
                                    npm WARN EBADENGINE   current: { node: 'v16.19.0', npm: '8.19.3' }
                                    npm WARN EBADENGINE }
2024-02-02T04:35:12.701Z [INFO]: added 219 packages, and audited 220 packages in 7s
2024-02-02T04:35:12.707Z [INFO]: 41 packages are looking for funding
                                 run `npm fund` for details
                                 found 0 vulnerabilities
2024-02-02T04:35:12.716Z [INFO]: # Completed phase: preBuild
                                 # Starting phase: build
                                 # Executing command: npm run build
2024-02-02T04:35:13.029Z [INFO]: > nba-stat-tracker@0.0.0 build
                                 > tsc && vite build
2024-02-02T04:35:14.287Z [INFO]: src/App.tsx(1,1): error TS6133: 'useState' is declared but its value is never read.
2024-02-02T04:35:14.301Z [ERROR]: !!! Build failed
2024-02-02T04:35:14.302Z [ERROR]: !!! Error: Command failed with exit code 2
2024-02-02T04:35:14.302Z [INFO]: # Starting environment caching...
2024-02-02T04:35:14.302Z [INFO]: # Environment caching completed
Terminating logging...

问题1：Node版本不兼容警告 #

AWS Amplify默认使用Node.js v16.19.0，而Vite 5.x要求Node版本至少v18.0.0或v20.0.0以上，因此触发引擎不兼容警告。

解决步骤：

• 在项目根目录创建或修改amplify.yml配置文件，指定构建时使用的Node版本：

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

• 可选：在package.json中添加engines字段，明确项目所需的Node和npm版本：

{
  "engines": {
    "node": ">=20.0.0",
    "npm": ">=10.0.0"
  }
}

问题2：TypeScript编译失败（TS6133） #

错误提示'useState' is declared but its value is never read，说明src/App.tsx中导入了useState但未使用。

解决步骤：

• 打开src/App.tsx，删除未使用的useState导入语句
• 若后续需要使用useState，补充对应的使用代码
• 若暂时不想清理，可修改tsconfig.json中的noUnusedLocals为false（不推荐，建议保持代码整洁）：

{
  "compilerOptions": {
    // ...其他配置
    "noUnusedLocals": false
  }
}

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