无法将React应用部署至AWS Amplify：构建失败求助

部署React应用到AWS Amplify时触发构建失败，核心报错为import VanillaTilt from "vanilla-tilt";语句无法解析模块。以下是详细报错信息、项目配置及已尝试的操作：

报错信息 #

# Starting phase: preBuild
# Executing command: npm rebuild bootstrap && npm install
2023-04-22T23:00:20.516Z [INFO]: rebuilt dependencies successfully
2023-04-22T23:00:32.996Z [WARNING]: npm
G]: /codebuild/output/src510865731/src/web/src/scripts/tiltAnimation.js:1:25
                                    > 1 | import VanillaTilt from "vanilla-tilt";
                                    >   |                         ^^^^^^^^^^^^^^
2023-04-22T23:00:47.260Z [INFO]: 
2023-04-22T23:00:47.443Z [ERROR]: !!! Build failed
2023-04-22T23:00:47.443Z [ERROR]: !!! Non-Zero Exit Code detected
2023-04-22T23:00:47.444Z [INFO]: # Starting environment caching...
2023-04-22T23:00:47.444Z [INFO]: # Environment caching completed
Terminating logging...

项目配置 #

package.json

{
  "engines": {
    "node": "v16.19.0",
    "npm": "8.19.3"
  },
  ...
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Hadibadi99/web"
  },
  ...
  },
  "homepage": "https://github.com/cobiwave/simplefolio#readme",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.8.3",
    "parcel": "^2.8.3",
    "prettier": "^2.8.1"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3",
    "jquery": "^3.6.3",
    "popper.js": "^1.16.1",
    "react-scripts": "^5.0.1",
    "vanilla-tilt": "^1.8.0"
  }
}

amplify.yml

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

已尝试操作 #

• 更新Parcel和Bootstrap包
• 在amplify.yml中添加npm rebuild bootstrap命令
• 在package.json中指定Node.js版本

解决方案 #

1. 修正VanillaTilt导入路径

VanillaTilt的ES模块导出路径可能未被Parcel正确识别，修改导入语句为：

import VanillaTilt from 'vanilla-tilt/dist/vanilla-tilt.esm.js';

或者直接引入UMD版本：

import VanillaTilt from 'vanilla-tilt/dist/vanilla-tilt.js';

2. 调整Amplify构建产物目录

Parcel默认将构建产物输出到dist目录，但当前amplify.yml中配置的baseDirectory为build，导致Amplify无法找到产物。修改amplify.yml的artifacts配置：

artifacts:
  baseDirectory: dist
  files:
    - '**/*'

3. 清理依赖缓存并重新安装

Amplify的缓存可能导致依赖未正确安装，更新preBuild命令以清理旧缓存：

preBuild:
  commands:
    - rm -rf node_modules package-lock.json
    - npm install

4. 强制指定Node.js版本

确保Amplify使用与本地一致的Node版本，在preBuild阶段添加版本切换命令：

preBuild:
  commands:
    - nvm install 16.19.0
    - nvm use 16.19.0
    - rm -rf node_modules package-lock.json
    - npm install

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