如何在ESM模块中导入CommonJS规范的HierarchicalTagsPlugin？

安全阿岳

2026-7-23

解决ESM项目中导入CommonJS规范的swagger-ui-plugin-hierarchical-tags插件问题

我正在使用Node.js和express-jsdoc-swagger，找到一款实现分层标签的插件swagger-ui-plugin-hierarchical-tags，但该插件采用CommonJS规范编写。我的应用已设置"type": "module"（即ESM模块），尝试多种导入方式均失败，报错信息如下：

TypeError: Cannot assign to read only property 'exports' of object '#'
at C:__DEVELOPMENT\pt2-backend\node_modules\swagger-ui-plugin-hierarchical-tags\build\index.js:6:14895
at Module. (C:__DEVELOPMENT\pt2-backend\node_modules\swagger-ui-plugin-hierarchical-tags\build\index.js:6:15172)
at Module. (C:__DEVELOPMENT\pt2-backend\node_modules\swagger-ui-plugin-hierarchical-tags\build\index.js:6:15300)
at r (C:__DEVELOPMENT\pt2-backend\node_modules\swagger-ui-plugin-hierarchical-tags\build\index.js:1:110)
at C:__DEVELOPMENT\pt2-backend\node_modules\swagger-ui-plugin-hierarchical-tags\build\index.js:1:902
at Object. (C:__DEVELOPMENT\pt2-backend\node_modules\swagger-ui-plugin-hierarchical-tags\build\index.js:1:912)
at Module._compile (node:internal/modules/cjs/loader:1165:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
at Module.load (node:internal/modules/cjs/loader:1043:32)
at Function.Module._load (node:internal/modules/cjs/loader:878:12)

尝试过的导入方式：
import pkg from "swagger-ui-plugin-hierarchical-tags"; const {HierarchicalTagsPlugin} = pkg;
import {default as HierarchicalTagsPlugin} from "swagger-ui-plugin-hierarchical-tags";
可行解决办法
1. 使用createRequire动态导入CommonJS模块
在ESM模块中，可通过Node.js内置的module.createRequire方法创建CommonJS风格的require函数，实现兼容导入：
import { createRequire } from 'module'; const require = createRequire(import.meta.url); const { HierarchicalTagsPlugin } = require('swagger-ui-plugin-hierarchical-tags');
2. 本地修改插件添加ESM兼容
对本地安装的插件代码进行修改，添加ESM导出支持：
找到node_modules/swagger-ui-plugin-hierarchical-tags/build/index.js文件
在文件末尾的module.exports代码下方添加ESM导出：
export default HierarchicalTagsPlugin; export { HierarchicalTagsPlugin };
注意：该方式在重新安装插件后会失效，需再次修改。
3. 给插件仓库提交PR（长期方案）
若具备开发能力，可向插件仓库提交PR，修改打包配置使其同时输出ESM和CommonJS两种格式的产物，从根源解决兼容问题。
内容的提问来源于stack exchange，提问作者Jesús García González

如何在ESM模块中导入CommonJS规范的HierarchicalTagsPlugin？

可行解决办法 #

1. 使用createRequire动态导入CommonJS模块 #

2. 本地修改插件添加ESM兼容 #

3. 给插件仓库提交PR（长期方案） #

可行解决办法

1. 使用`createRequire`动态导入CommonJS模块

2. 本地修改插件添加ESM兼容

3. 给插件仓库提交PR（长期方案）