Bugfix: unplugin-vue-component 找不到 Vant 组件的问题

title: "Bugfix: unplugin-vue-component 找不到 Vant 组件的问题"
date: 2023-05-03 18:14:19
categories: unplugin-vue-component
tags: bugfix

报错信息

[plugin:vite:import-analysis] Failed to resolve import "vant/es" from x Does the file exist?
​
/* unplugin-vue-components disabled */import { Button as __unplugin_components_0 } from 'vant/es'; import 'vant/es/button/style/index'

现象

如以上报错信息，vite 找不到 Vant 组件，记录本文时，vant vite unplugin-vue-components 等版本如下

{
  "dependencies": {
    "vant": "^4.2.1"
  },
  "devDependencies": {
    "vite": "^3.2.5",
    "unplugin-vue-components": "^0.24.1"
  }
}

Vant 官方文档编写的按需引入方式如下：

import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { VantResolver } from "unplugin-vue-components/resolvers";
​
export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

个人配置如下：

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    svgLoader({ svgoConfig: {} }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "../src"),
      },
    ],
    extensions: [".ts", ".js"],
  },
  define: {
    "process.env": {},
  },
});

解决方案

找了挺久的，最后发现是拓展名的问题，不限制拓展名或者加入 .mjs 拓展名即可解决。

export default defineConfig({
-   extensions: [".ts", ".js"],
+   extensions: [".ts", ".js", ".mjs"],
})