Storybook与string-width库兼容异常及重复修复问题求助

问题本质 #

你的问题是yarn依赖版本解析逻辑导致：cli-table3（CommonJS模块）意外拉取了纯ESM格式的string-width，stylelint拉取了纯ESM的strip-ansi，触发ERR_REQUIRE_ESM错误；同时依赖缓存、lock文件残留和Docker部署的路径冲突，导致问题重复出现，临时删除yarn.lock仅能治标。

具体永久解决方案 #

1. 修正resolutions配置，强制锁定兼容版本 #

之前的resolutions未覆盖所有嵌套依赖，需明确指定兼容CommonJS的具体版本：

• string-width v5+为纯ESM，锁定v4.x稳定版
• strip-ansi v7+为纯ESM，锁定v6.x稳定版

更新package.json的resolutions字段：

"resolutions": {
  "string-width": "^4.2.3",
  "strip-ansi": "^6.0.1",
  "**/string-width": "^4.2.3",
  "**/strip-ansi": "^6.0.1"
}

**/前缀确保所有层级的嵌套依赖都继承指定版本，避免深层依赖偷偷拉取高版本ESM包。

2. 彻底清理缓存并生成可靠的lock文件 #

执行以下命令清除所有残留的旧依赖和缓存：

# 清空yarn全局缓存
yarn cache clean
# 删除旧lock文件和node_modules
rm -rf yarn.lock node_modules
# 重新安装并生成锁定版本的lock文件
yarn install --frozen-lockfile

--frozen-lockfile会强制使用当前resolutions生成的依赖版本，防止yarn自动漂移到不兼容版本。

3. 解决Docker部署的路径冲突问题 #

在docker-compose.yml的前端服务配置中，指定独立的yarn缓存目录，避免容器内路径冲突：

services:
  frontend:
    # 原有配置...
    environment:
      - YARN_CACHE_FOLDER=/tmp/yarn-cache
    volumes:
      - /tmp/yarn-cache:/tmp/yarn-cache

每次部署前可清理该临时缓存目录，确保容器内安装的依赖是干净的。

4. 验证修复效果 #

• 运行 make frontend-storybook-logs 确认Storybook无ERR_REQUIRE_ESM报错
• 运行 make check 确认stylelint正常执行
• 新增依赖或在新环境部署时，直接执行 yarn install --frozen-lockfile，无需删除lock文件

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