在uniapp中使用unplugin-auto-import使用报错解决办法汇总，以及新版本HBuilder X如何使用unplugin-auto-import

写在前面：如果只想知道如何在uniapp中使用unplugin-auto-import插件，直接跳到文章末尾第4点即可。

学习uniapp时，学习到此篇博客：开发uniapp使用Vue3组合式API版本，如何实现从vue模块中自动导入_uniapp unplugin-auto-import-优快云博客

按照博客方法进行配置，出现很多报错情况，

1、报错情况

1.1 情况1：

failed to load config from C:\Users\Administrator\Documents\HBuilderProjects\demo1\vite.config.ts 13:13:23.122 error when starting dev server: 13:13:23.122 Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Administrator\node_modules\pkg-types\dist\index.mjs not supported. 13:13:23.122 Instead change the require of C:\Users\Administrator\node_modules\pkg-types\dist\index.mjs to a dynamic import() which is available in all CommonJS modules.

1.2 情况2：

Cannot find package '@dcloudio/vite-plugin-uni'

1.3 情况3：

npm error code ERESOLVE npm error ERESOLVE could not resolve npm error npm error While resolving: @dcloudio/vite-plugin-uni@3.0.0-alpha-3000020210521001 npm error Found: vite@6.2.5 npm error node_modules/vite npm error vite@"^6.2.5" from the root project npm error npm error Could not resolve dependency: npm error peer @vitejs/plugin-vue@"^1.2.2" from @dcloudio/vite-plugin-uni@3.0.0-alpha-3000020210521001 npm error node_modules/@dcloudio/vite-plugin-uni npm error @dcloudio/vite-plugin-uni@"^3.0.0-alpha-3000020210521001" from the root project npm error npm error Conflicting peer dependency: vite@2.9.18 npm error node_modules/vite npm error peer vite@"^2.5.10" from @vitejs/plugin-vue@1.10.2 npm error node_modules/@vitejs/plugin-vue npm error peer @vitejs/plugin-vue@"^1.2.2" from @dcloudio/vite-plugin-uni@3.0.0-alpha-3000020210521001 npm error node_modules/@dcloudio/vite-plugin-uni npm error @dcloudio/vite-plugin-uni@"^3.0.0-alpha-3000020210521001" from the root project

2、修复方案

出现报错原因：

1、插件版本不兼容

2、插件多版本同时存在，导致冲突

现将可能的修复方案提供大家参考：

1.1  确认是否有node_modules文件夹，是否有package.json文件

使用HBuilder X（我现在的版本是4.5.7）创建的项目，默认是没有

解决办法：

按上图启动命令行，（一句一句执行）

npm init

 回车后出现要填的内容可以一路回车默认即可。

npm install

执行完会出现node_modules文件夹，如果没出现文件夹可以执行一次安装，如安装express

npm install express

1.2 解决插件版本冲突，以及多版本插件混用情况

• unplugin-auto-import的运行需要依赖 pkg-types，
• 依赖的 pkg-types 是 ESM 格式，会出现情况1报错
• Vite 生态正在向 ESM 迁移，pkg-types 3.0+ 是纯 ESM 包
• 尝试用 CommonJS 的 require() 加载ESM模块

解决办法：

1. 统一 pkg-types 版本

npm install pkg-types@2.1.0 --save-dev --force

这会强制所有依赖使用 pkg-types@2.1.0（最后一个兼容性较好的 CommonJS 版本）。

2. 清理依赖锁文件并重装（可选）

rm -rf node_modules package-lock.json
npm install

3.解决新旧版 unplugin-auto-import 混用问题

（uniapp内置的是0.18.6版本，但是手动安装的是19.1.0版本）存在混用问题，现在统一版本：

npm uninstall unplugin-auto-import  # 移除独立安装的新版
npm install unplugin-auto-import@0.18.6 --save-dev  # 使用兼容版本

1.3.附上package.json配置（可选）

{
  "name": "uni-preset-vue",
  "version": "0.0.0",
  "scripts": {
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-jd": "uni -p mp-jd",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:mp-xhs": "uni -p mp-xhs",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-jd": "uni build -p mp-jd",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:mp-xhs": "uni build -p mp-xhs",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union"
  },
  "dependencies": {
    "@dcloudio/uni-app": "3.0.0-4050720250324001",
    "@dcloudio/uni-app-harmony": "3.0.0-4050720250324001",
    "@dcloudio/uni-app-plus": "3.0.0-4050720250324001",
    "@dcloudio/uni-components": "3.0.0-4050720250324001",
    "@dcloudio/uni-h5": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-alipay": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-baidu": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-jd": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-lark": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-qq": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-weixin": "3.0.0-4050720250324001",
    "@dcloudio/uni-mp-xhs": "3.0.0-4050720250324001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-4050720250324001",
    "vue": "^3.5.13",
    "vue-i18n": "9.14.3"
  },
  "devDependencies": {
    "@dcloudio/types": "3.4.14",
    "@dcloudio/uni-automator": "3.0.0-4050720250324001",
    "@dcloudio/uni-cli-shared": "3.0.0-4050720250324001",
    "@dcloudio/uni-stacktracey": "3.0.0-4050720250324001",
    "@dcloudio/vite-plugin-uni": "3.0.0-4050720250324001",
    "pkg-types": "^2.1.0",
    "unplugin-auto-import": "^0.18.6",
    "vite": "5.2.8"
  }
}

1.4 其他的配置按照原博客配置即可。

3、最后试验：

4、写在最后，新版本如何使用unplugin-auto-import

如果你用的是最新的HBuilder X（我现在的版本是4.5.7），默认是自带有unplugin-auto-import插件，使用方法：

4.1. 先查看是否有node_modules文件夹，是否有package.json文件

如果没有，请参照2.修复方案-2.1解决

4.2.项目根目录创建文件：vite.config.js

输入如下代码：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
    plugins: [
        uni(),        
        // 自动导入配置
        AutoImport({
            imports:[
                // 预设
                'vue',
                'uni-app'                
            ]
        })
    ]    
})

保存，重启项目即可。