GitHub Actions中Next.js CI/CD构建找不到babel-plugin-styled-components

构建失败是两个问题叠加导致的：

1. CI环境执行npm install时，如果系统默认NODE_ENV=production，npm会自动跳过devDependencies下所有包的安装，你把babel-plugin-styled-components放在devDependencies里，构建阶段Next.js调用babel编译时自然找不到这个插件。本地开发环境默认NODE_ENV为development，会全量安装所有依赖，所以不会报错。
2. 你项目中没有安装styled-components本体包，仅安装了对应的babel插件，干净的CI环境没有全局依赖或隐式依赖兜底，会触发模块解析失败。
   另外你配置文件里的dependenciesLocal是npm不识别的非标准字段，里面列的依赖不会被自动安装，后续如果有依赖写在这个字段下也会报缺包错误。

按顺序操作即可解决：

• 补全必需依赖，将编译阶段需要的包放到标准依赖项中
  本地项目根目录执行以下命令，安装styled-components本体和对应babel插件，安装后两个包会自动写入dependencies字段，不会被npm的生产安装模式跳过：

  npm install styled-components babel-plugin-styled-components
  

  同时把dependenciesLocal里需要在生产环境用的依赖，全部挪到标准的dependencies对象里，删掉无用的dependenciesLocal字段。
• 修改CI工作流的依赖安装逻辑
  把两个job里的Install dependencies步骤的命令替换为更适合CI环境的npm ci，这个命令会严格按照package-lock.json的版本安装所有依赖（包括devDependencies），不会出现版本漂移问题，也不会默认跳过开发依赖：

  - name: Install dependencies
    run: npm ci
    env:
      NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
  

  同时去掉build步骤里的CI: false配置，Next.js原生支持CI环境，该配置反而可能触发非预期的交互类逻辑导致构建卡住。
• 清理工作流冗余步骤
  你当前的build和deploy两个job各自独立拉代码、装依赖、跑构建，属于重复操作，既浪费CI运行时长，也可能出现两个job构建产物不一致的问题。可以直接删掉独立的build job，把构建逻辑合并到deploy job中；或者在build job构建完成后把产物通过actions/upload-artifact上传，deploy job直接下载构建好的产物部署，不用重复编译。

改完提交代码到staging分支，重新触发工作流即可正常构建。

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