vue2 vant组件库报错：ERROR in ./node_modules/@vant/use/dist/index.esm.mjs 101:12-19export ‘isVNode‘ (imp

原创已于 2022-07-25 22:45:40 修改 · 7.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-07-25 22:19:54 首次发布

在Vue2项目中，升级Vant到3.x版本后遇到报错：ERROR in ./node_modules/@vant/use/dist/index.esm.mjs，报错信息提示'isVNode'未找到。解决方法是降级到Vant2.12.2。此外，介绍了Vant2的自动按需引入步骤，包括安装babel-plugin-import插件、配置和组件的全局或局部注册。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

安装了vant 3以上版本，在vue2引入vant组件库不生效，报错：

ERROR in ./node_modules/@vant/use/dist/index.esm.mjs 101:12-19
export 'isVNode' (imported as 'isVNode') was not found in 'vue'

解决方法：

卸载后重装 vant2.12.2即可

vant2 自动按需引入

vant2的官方文档：

https://vant-ui.github.io/vant/v2/#/zh-CN/quickstart

1. 安装插件：babel-plugin-import -D

npm i babel-plugin-import -D

或 yarn add babel-plugin-import -D

2.配置

根据自己的实际情况配置，我是第二种

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

3.注册

根据自己所需，选择其中一种方式注册

3.1 全局注册

在main.js 里引入并注册所需的vant组件

import {Button} from 'vant'
Vue.use(Button)//全局注册

3.2 在所需页面注册

<script>
import {Button} from 'vant'
export default {
  // 注册组件
  components:{
    vanButton:Button
  }
}
</script>