Next.js部署AWS Amplify时tailwindcss/forms找不到的生产环境问题求助

问题分析 #

本地运行正常，但Amplify构建时提示找不到@tailwindcss/forms，通常是依赖未被正确纳入项目配置、构建环境与本地不一致，或是缓存残留导致的。

解决方案 #

1. 确认依赖已写入package.json #

本地可能通过缓存或全局安装了依赖，但Amplify构建时会重新拉取依赖，需确保@tailwindcss/forms已添加到项目依赖中：

• 执行命令检查本地依赖状态：

  npm list @tailwindcss/forms
  

• 若输出为空，安装依赖并提交配置文件到仓库：

  npm install @tailwindcss/forms --save-dev
  git add package.json package-lock.json
  git commit -m "Add tailwind forms plugin as dev dependency"
  git push
  

2. 匹配Amplify与本地的Node.js版本 #

Amplify默认Node版本可能和本地不一致，引发依赖安装异常：

• 查看本地Node版本：node -v
• 登录AWS Amplify控制台，进入目标应用 → 构建设置 → 构建规格，在frontend阶段添加版本指定：

  frontend:
    phases:
      preBuild:
        commands:
          - nvm install 20 # 替换为你的本地Node版本号
          - nvm use 20
  

3. 清除Amplify构建缓存 #

旧缓存可能残留异常依赖状态，导致新依赖未被正确安装：

• 在Amplify控制台的构建页面，找到最近的构建记录，点击操作 → 清除构建缓存并重新构建

4. 检查构建命令配置 #

确保Amplify使用严格匹配lock文件的安装命令：

• 在amplify.yml的preBuild阶段，使用npm ci替代npm install：

  preBuild:
    commands:
      - npm ci
  

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