require引入ESM模块报错：string-width v5与wide-align兼容问题求助

报错信息 #

#11 44.55  ERROR  require() of ES Module /app/node_modules/string-width/index.js from /app/node_modules/wide-align/align.js not supported.
#11 44.55 Instead change the require of index.js in /app/node_modules/wide-align/align.js to a dynamic import() which is available in all CommonJS modules.
#11 44.55
#11 44.55   Instead change the require of index.js in node_modules/wide-align/align.js to a dynamic import() which is available in all CommonJS modules.
#11 44.55   at Object. (node_modules/wide-align/align.js:2:19)
#11 44.55  ERROR  require() of ES Module /app/node_modules/string-width/index.js from /app/node_modules/wide-align/align.js not supported.
#11 44.55 Instead change the require of index.js in /app/node_modules/wide-align/align.js to a dynamic import() which is available in all CommonJS modules.
#11 44.55
#11 44.57 error Command failed with exit code 1.

问题背景 #

这是包管理器依赖解析逻辑导致的冲突：

• wide-align（被npmlog、vite等依赖）的package.json明确限制string-width版本为^1.0.2 || 2 || 3 || 4，并标注不支持v5（因v5为纯ESM模块），但yarn未遵循该限制，安装了v5版本，导致CommonJS模块（wide-align）尝试require ESM模块（string-width v5）时触发报错。
• 环境存在差异：Stackblitz刷新lock文件后可正常运行，但复制到本地仍报错；本地生成的lock文件复制到Stackblitz则容器运行失败。
• wide-align已两年未维护，无法等待官方修复。

临时解决方案 #

• 用yarn resolutions强制锁定兼容版本：在项目package.json中添加以下配置，强制安装符合wide-align要求的string-width版本：

  "resolutions": {
    "string-width": "^4.2.3"
  }
  

  随后删除yarn.lock和node_modules文件夹，重新执行yarn install即可正常运行，仅会触发版本兼容警告。

长期解决方案建议 #

1. 替换依赖包：
   wide-align仅实现基础文本对齐功能，可自行编写简单的对齐逻辑，或选用活跃维护的替代包（如cli-align），再通过resolutions配置强制上层依赖使用替代包。

2. 给wide-align打补丁：
   使用patch-package工具修改wide-align源码，适配ESM模块：

   • 安装依赖：yarn add patch-package --dev
   • 修改node_modules/wide-align/align.js代码，将静态require改为动态import：

     // 原代码
     const stringWidth = require('string-width');
     // 修改为动态import（适配CommonJS环境）
     const stringWidth = await import('string-width');
     

   • 生成补丁：npx patch-package wide-align，后续安装依赖时补丁会自动应用。

3. 切换包管理器：
   尝试使用npm或pnpm，这两个工具的依赖版本解析逻辑更严格，能避免此类不符合依赖限制的版本被安装。

4. 升级上层依赖：
   检查npmlog、vite等依赖wide-align的包是否有更新版本，确认新版本是否已替换或移除wide-align依赖，通过升级上层依赖从根源解决问题。

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