xkeee
xkeee
  • 发布:2026-04-01 10:23
  • 更新:2026-04-01 10:26
  • 阅读:43

【报Bug】unplugin-auto-import/vite" resolved to an ESM file. ESM file cannot be loaded by `require`

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows11

HBuilderX类型: 正式

HBuilderX版本号: 5.05

浏览器平台: Chrome

浏览器版本: 版本 117.0.5938.150(正式版本)(64 位)

项目创建方式: HBuilderX

操作步骤:

预期结果:

实际结果:

X [ERROR] "unplugin-auto-import/vite" resolved to an ESM file. ESM file cannot be loaded by require.

bug描述:

采用 “可视化” 模式创建了一个新的项目( vue3 + ts + 组合式API)

本来准备像vscode项目那样,引入:unplugin-auto-import,以便在每个页面自动导入一些常用的工具和类型,比如:vue、uni-app、@/utils/request 等。。。
然后直接报错了:
X [ERROR] "unplugin-auto-import/vite" resolved to an ESM file. ESM file cannot be loaded by require.

按AI的方案尝试处理,包括【重新安装插件、修改名称为vite.config.mts、指定type=module】都解决不了问题!
我想问官方:
1,是不支持自动导入的搞法吗(unplugin-auto-import)?

2,网上有帖子说:
【现代前端工具如Vite、Unocss已全面转向ES模块,而一些老牌框架如Uniapp的部分依赖仍停留在CommonJS时代。】
我想问:是真的吗?uni-app是【老牌停留在commonJS时代】??

3,安装uni-app Vite 插件的命令是什么?
npm install -D @dcloudio/vite-plugin-uni?
npm install -D @dcloudio/vite-plugin-uni@latest?
找遍了整个uni-app官网,好像都没找到这个命令和版本说明

4,最后的选择
“vue3 + ts + 组合式API”的项目,到底是应该“可视化”创建项目好?还是 CLI创建项目好?

希望能收到uni工程师的回复,谢谢。

2026-04-01 10:23 负责人:无 分享
已邀请:
Ask小助手

Ask小助手 - Ask社区AI助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

作为DCloud官方人员,对该bug反馈的评审如下:

一、反馈内容完整性评审

不足之处:

  1. 代码示例缺失:未提供vite.config.js/vite.config.ts的具体配置内容、package.json依赖列表,官方无法判断具体的引入方式和配置是否正确
  2. 复现步骤过于简略:仅填写了".",无法判断是在HBuilderX内运行时报错,还是CLI命令行运行时报错,或是在特定平台(如App、H5、小程序)编译时报错
  3. 预期结果未填写:无法确认用户的具体期望行为

已有信息:

  • 错误信息完整:"unplugin-auto-import/vite" resolved to an ESM file. ESM file cannot be loaded by require
  • 环境信息完整:Windows 11、HBuilderX 5.05正式版、Vue3+TS+组合式API

建议补充:
请提供完整的vite.config.ts配置文件内容、package.json中的type字段设置,以及具体的运行命令(如npm run dev:h5或HBuilderX菜单操作路径)。

二、Bug是否成立分析

根据知识库检索,该问题可能并非uni-app内核bug,而是配置或使用方式问题

  1. unplugin-auto-import 支持情况:知识库中vitesse-uni模板明确使用了unplugin-auto-import插件,说明uni-app Vue3+Vite项目支持该插件。

  2. ESM支持情况:uni-app Vue3项目基于Vite,完全支持ESM。知识库中vite-config-1明确说明vite.config.js是ESM格式,使用import/export语法。

  3. 错误原因推测:"ESM file cannot be loaded by require"通常出现在:

    • Node.js版本过低(Vue3/Vite要求Node 18+、20+)
    • package.json中未设置"type": "module"且配置文件名为.js而非.mjs/.ts
    • HBuilderX内置的Node版本与项目要求不匹配(知识库quickstart-cli提到:如果使用HBuilderX 3.6.7以下版本运行Vue3/Vite创建的CLI工程,需要设置node路径为高版本)

三、用户问题解答

基于知识库内容,回答您的4个问题:

1. 是否支持unplugin-auto-import?
支持。插件市场模板vitesse-uni已集成该插件,可实现Composition API等自动导入。

2. uni-app是否停留在CommonJS时代?
不是。uni-app Vue3/Vite项目已全面支持ESM。知识库明确说明Vue3项目使用Vite构建工具,配置文件vite.config.js采用ESM语法(import/export)。Vue2项目使用Webpack,但Vue3项目完全是现代ESM架构。

3. 安装uni-app Vite插件的命令?
知识库中vite-config-1显示需安装@dcloudio/vite-plugin-uni,但具体install命令在知识库中未明确记录。通常命令为:

npm install -D @dcloudio/vite-plugin-uni

本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
建议根据项目模板要求安装对应版本。

4. 可视化 vs CLI创建项目?
两种方式都支持Vue3+TS+组合式API:

  • HBuilderX可视化:适合快速启动,内置了必要的编译环境
  • CLI方式:知识库quickstart-cli显示,CLI创建更灵活,适合需要自定义构建流程、使用第三方Vite插件(如unplugin-auto-import)的场景

建议:如需使用大量第三方Vite插件,建议使用CLI方式创建项目,因为可视化创建的项目在HBuilderX内部运行时的Node环境可能与某些ESM-only插件存在兼容性问题。

四、解决方案建议

  1. 检查Node版本:确保Node版本≥18(Vue3/Vite要求)
  2. 配置文件重命名:将vite.config.ts改为vite.config.mts,或在package.json中设置"type": "module"
  3. HBuilderX设置:如使用HBuilderX运行CLI项目,请在设置中配置外部高版本Node路径(工具→设置→运行配置→Node路径)
  4. 删除lock文件:如知识库对话记录所示,尝试删除node_modules和lock文件后重新安装

如问题持续,请提供完整的配置文件内容和package.json,以便进一步排查。

内容为 AI 生成,仅供参考

要回复问题请先登录注册