在webpack项目中引入jquery插件jstree时,提示如下错误:

TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).jstree is not a function
    at a.mounted (list.vue:104)
    at _e (vue.min.js:6)
    at Object.insert (vue.min.js:7)
    at C (vue.min.js:8)
    at a.i.nodeOps [as __patch__] (vue.min.js:8)
    at a.e._update (vue.min.js:7)
    at a.r (vue.min.js:6)
    at So.get (vue.min.js:7)
    at new So (vue.min.js:7)
    at ve (vue.min.js:6)

很显然,是由于jstree插件的方法没有绑定在jquery对象(这里是$)上,仔细检查代码,发现并没有错误,如下:

//  注意先后顺序
import $ from 'jquery'
import 'jstree'
import 'jstree/dist/themes/default/style.css'
//  总输出为undefined
console.log($.fn.jstree)

这点很奇怪,翻阅webpack的文档,因为都是同步从上到下依次引入,所以引用顺序与方法都是绝对正确的,难道是webpack打包时没有引入相关的代码?

检验生成的js文件,发现jstree源码赫赫在目,说明webpack也没有问题,那问题到底出现在哪里?难道时jstree版本的问题?

再次检验项目下的node_modules文件,发现除了正常的jstree与jquery文件夹,还有如下内容:
1. _jquery@3.2.1@jquery
2. _jstree@3.3.4@jstree

这是什么?经过询问,这是执行cnpm安装后的结果,也就是说先用npm安装了依次jstree,后又因为感觉cnpm执行速度快,用cnpm再安装了一次。

知道了问题的产生原因,那么就很好解决了,首先直接删除cnpm安装生成的文件夹,然后用npm重新安装一次jstree即可,如下:

cd node_modules
rm -Rf _jquery@3.2.1@jquery
rm -Rf _jstree@3.3.4@jstree
npm install jstree --save

再次运行项目,发现jstree已工作正常。

最后跟踪webpack的编译过程,我们发现,通过cnpm安装的架包往往具有更高的调用优先级,这也导致jquery的相关插件都有可能出现错误,如下。

ERROR in ./~/css-loader!./~/_jstree@3.3.4@jstree/dist/themes/default/style.css
Module build failed: Error: ENOENT: no such file or directory, open 'D:\Workspace\yii-hot-vue\node_modules\_jstree@3.3.4@jstree\dist\themes\default\style.css'

所以,如果上述手动排除的方法不能解决你的问题,强烈建议你先删除所有的npm架包,然后再执行全部安装,如下:

#   先删除所有的文件
rm -Rf node_modules
#   执行项目的全量安装
npm install

结论

在对前端项目进行管理时,要么全部都使用npm进行管理,要么全部都是用cnpm进行管理,切不可混合使用,最后导致出现架包冲突,如果jquery的插件出现了无法找到的情况,请检查是否调用了cnpm的缘故。

Logo

前往低代码交流专区

更多推荐