通过npm安装semantic-ui失败，报错ERR_REQUIRE_ESM

环境信息 #

• Node.js版本：v16.14.0
• npm版本：8.10.0

报错详情 #

执行npm i semantic-ui时出现依赖废弃警告，最终报错：

npm ERR! code 1
npm ERR! path /home/indikau/workspace/learning/web_design/semantic_ui/Tutorial/13_theming/node_modules/semantic-ui
npm ERR! command failed
npm ERR! command sh -c gulp install
npm ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /home/indikau/workspace/learning/web_design/semantic_ui/Tutorial/13_theming/node_modules/del/index.js from /home/indikau/workspace/learning/web_design/semantic_ui/Tutorial/13_theming/node_modules/semantic-ui/tasks/clean.js not supported.
npm ERR! Instead change the require of index.js in /home/indikau/workspace/learning/web_design/semantic_ui/Tutorial/13_theming/node_modules/semantic-ui/tasks/clean.js to a dynamic import() which is available in all CommonJS modules.
npm ERR!     at Object.<anonymous> (/home/indikau/workspace/learning/web_design/semantic_ui/Tutorial/13_theming/node_modules/semantic-ui/tasks/clean.js:8:12)
npm ERR!     at Object.<anonymous> (/home/indikau/workspace/learning/web_design/semantic_ui/Tutorial/13_theming/node_modules/semantic-ui/gulpfile.js:21:18)
npm ERR!     at async Promise.all (index 0) {
npm ERR!   code: 'ERR_REQUIRE_ESM'
npm ERR! }

问题原因 #

semantic-ui的构建脚本依赖del包清理文件，但del最新版本已改为纯ESM模块，而semantic-ui仍使用CommonJS的require()语法加载它，Node.js不支持跨模块规范的直接加载，因此触发报错。

解决办法 #

方法一：用npm overrides强制指定兼容版本 #

npm 8.3及以上版本支持overrides字段，可强制让semantic-ui使用CommonJS版本的del：

1. 若项目无package.json，先执行npm init -y生成
2. 在package.json中添加如下配置：

"overrides": {
  "semantic-ui": {
    "del": "^5.1.0"
  }
}

3. 重新运行安装命令：

npm i semantic-ui

方法二：先安装兼容版del再安装semantic-ui #

直接先安装CommonJS版本的del，再安装semantic-ui：

npm i del@5.1.0
npm i semantic-ui

注意事项 #

semantic-ui官方已停止维护，后续可能会遇到更多依赖兼容问题。如果是新项目，建议考虑使用semantic-ui-react（仅适用于React项目）或其他活跃维护的UI框架替代。

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