Gitlab CI中Storybook 6.5构建失败问题排查求助

1. 优先解决package-lock.json与package.json不同步问题 #

npm ci的核心特性是严格按照package-lock.json的版本安装依赖，一旦lock文件和package.json中依赖版本不匹配就会报错。你需要：

• 本地执行以下命令，彻底重新生成lock文件：

  rm -rf node_modules package-lock.json
  npm install
  

• 将新生成的package-lock.json提交到Git仓库，确保GitLab CI拉取的是最新的、与package.json完全同步的lock文件。

2. 修复webpack-filter-warnings-plugin版本冲突 #

webpack-filter-warnings-plugin@1.2.1是Storybook间接引入的依赖，它仅支持webpack 2-4，和你当前的webpack 5不兼容。可以通过npm的overrides特性强制替换为支持webpack 5的版本：

• 在你的package.json中添加如下配置：

  "overrides": {
    "webpack-filter-warnings-plugin": "^2.0.0"
  }
  

• 再次执行npm install更新lock文件，提交变更到仓库。该版本插件已适配webpack 5，可消除版本冲突警告。

3. 确保CI环境与本地Node.js版本一致 #

你本地使用Node.js 18.12.1，需保证GitLab CI环境的Node版本和本地完全一致，避免因npm版本差异导致lock文件解析异常：

• 在.gitlab-ci.yml的构建任务中指定Node镜像：

  storybook-build:
    image: node:18.12.1
    script:
      - npm ci
      - npm run build-storybook
    artifacts:
      paths:
        - storybook-static
  

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