Symfony 6 Webpack Encore项目中无法添加Masonry网格的求助

你遇到的Uncaught TypeError: r(...)(...).masonry is not a function错误，是因为当前版本的Masonry默认不再以jQuery插件形式导出，无法直接通过$().masonry()调用。以下是两种可行的解决方案：

方案一：使用Masonry原生构造函数初始化 #

直接通过Masonry类实例化，无需依赖jQuery插件语法：

修改你的app.js代码：

// You can specify which plugins you need
import 'bootstrap';
// import { Tooltip, Toast, Popover } from 'bootstrap';

// start the Stimulus application
import './bootstrap';

import $ from 'jquery';
import Masonry from 'masonry-layout';

// 等待DOM加载完成后初始化
$(document).ready(function() {
    const gridElement = $('.grid')[0];
    new Masonry(gridElement, {
        itemSelector: '.grid-item',
        columnWidth: 160
    });
});

方案二：手动注册为jQuery插件 #

如果坚持要使用$().masonry()的语法，需要手动将Masonry挂载到jQuery原型链上：

修改app.js代码：

// You can specify which plugins you need
import 'bootstrap';
// import { Tooltip, Toast, Popover } from 'bootstrap';

// start the Stimulus application
import './bootstrap';

import $ from 'jquery';
import Masonry from 'masonry-layout';

// 手动注册Masonry为jQuery插件
$.fn.masonry = function(options) {
    return this.each(function() {
        new Masonry(this, options);
    });
};

// 等待DOM加载完成后调用
$(document).ready(function() {
    $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 160
    });
});

额外注意事项 #

• 必须确保DOM完全加载后再初始化Masonry，否则可能找不到.grid元素导致初始化失败。
• 你当前Webpack Encore的autoProvideVariables配置无需修改，已正确提供jQuery全局变量。
• 若问题仍存在，可尝试更新masonry-layout到最新版本：

yarn upgrade masonry-layout

内容的提问来源于stack exchange，提问作者Khaled Boussoffara