如何解决Webpack Encore 和 jQuery 插件:$(...).isotope 不是函数
我正在使用 Yarn 和 jQuery 进行 Symfony5 项目。当我尝试在 Webpack Encore 中使用 jQuery 插件“isotope-layout”时出现错误。
我尝试修复它好几个小时,但我可能没有以正确的方式去做。
这是我的代码:
webpack.config.js
// Same error with or without "autoProvidejQuery"
Encore.autoProvidejQuery();
app.js
import 'jquery';
import 'popper.js';
import 'bootstrap';
import 'isotope-layout';
// start the Stimulus application
import './bootstrap';
custom.js
import jQuery from 'jquery';
import 'isotope-layout';
(function ($) {
// Here is the error :
$(...).isotope({...});
})(jQuery);
错误:
Uncaught TypeError: $(...).isotope is not a function
解决方法
在使用 Isotope 时,您不必使用 jQuery。您可以使用 their Webpack documentation 中的此示例:
var Isotope = require('isotope-layout');
var iso = new Isotope( '.grid',{
// options...
});
如果你想使用 jQuery,还有一个例子。安装:
npm install jquery
npm install jquery-bridget
然后:
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');
// make Isotope a jQuery plugin
jQueryBridget( 'isotope',Isotope,$ );
// now you can use $().isotope()
$('.grid').isotope({
// options...
});
如果您使用的是现代 Javascript(并且您使用的是 Webpack,太棒了!),在许多情况下you might not need jQuery。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。