从antd或者vant、element-ui这些UI框架里导入组件报错

一般你安装了一个UI框架为了项目优化都会选择按照官方给的方法按需引入UI组件,但是引入组件时却发现报错,报找不到这个组件,出现这样的情况有两种原因:
1.UI框架升级,把某些旧组件废弃了,确实没有这个组件。我就出现过这种情况,有次按照某个网友给的参考搭建项目框架,却发现引入的组件报错,以为是按需没配置好的原因,改来改去始终报错,只能再次上网搜解决方法,看到一个网友评论说是不是没有这个组件,让我一愣,我立刻换了一个常用的Button组件,果然不报错了。。。
2.按需引入没配置好。逛社区的时候发现一个网友问为什么总是报找不到这个组件,他用的是react+ts搭建的项目,以为自己没配置好tsconfig文件,并且把这个文件的代码截图求助,在这上面掉过坑的我立马想到了按需引入的问题,这个网友找错方向了。
解决方法是安装babel插件

npm install babel-plugin-import babel-plugin-component -D

根目录下新建babel.config.js文件

例如:

module.exports = {

presets: ["@babel/preset-env"],

plugins: [

    [

        "component",

        {

            "libraryName": "element-ui",

            "styleLibraryName": "theme-chalk"

        }

    ]
  ]

};
阅读 52

推荐阅读