React项目本地正常，修改package.json后AWS Amplify部署失败求助

核心问题点 #

你的部署失败主要来自以下几个package.json中的问题：

1. 旧版Chakra UI与React 18不兼容
   你使用的@chakra-ui/core@0.8.0是Chakra UI的过时版本，该版本未适配React 18的并发特性，会在构建阶段抛出兼容性错误。

2. 冲突的scripts依赖
   dependencies中包含的"scripts": "^0.1.0"是一个过时工具库，且与package.json的scripts字段重名，会干扰npm的依赖解析流程，引发安装或构建失败。

3. homepage字段导致资源路径错误
   你设置的homepage指向GitHub Pages域名，但AWS Amplify会自动处理静态资源路径，该字段会让React构建时生成的资源路径指向错误地址，导致Amplify上的应用无法加载静态文件。

修复步骤 #

1. 清理冲突依赖 #

直接移除dependencies中的"scripts": "^0.1.0"，这个包对项目没有必要。

2. 升级Chakra UI到兼容版本 #

卸载旧版@chakra-ui/core，安装支持React 18的最新Chakra UI套件：

npm uninstall @chakra-ui/core
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

同时更新代码中Chakra UI的导入路径，从@chakra-ui/react导入组件，替代旧的@chakra-ui/core。

3. 移除homepage字段 #

删除package.json中的"homepage"配置，Amplify会自动处理静态资源路径。若后续需要自定义域名，可直接在Amplify控制台配置。

4. 简化构建脚本（可选） #

你添加的predeploy和deploy脚本是针对GitHub Pages的，Amplify部署无需这些，可删除避免混淆：

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

修改后的示例package.json #

{
  "name": "myreactportfolio11",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^10.18.0",
    "iframe-resizer": "^4.2.11",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-dom": "^18.2.0",
    "react-s3": "^1.3.1",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^4.0.0"
  }
}

关于Amplify的额外配置 #

修复package.json后，推送代码到GitHub即可，Amplify会自动执行npm install和npm run build。若仍失败，可在Amplify控制台查看构建日志，日志会显示具体错误信息（如依赖安装失败、代码语法错误等），便于进一步排查。

内容的提问来源于stack exchange，提问作者oz.vegas