无法将砌体添加到 symfony 6 webpack-encore 项目

Question

我正在处理一个 symfony 6 项目，我正在尝试使用 webpack encore 添加砌体网格。

我正在使用此文档： masonry.desandro.com

我正在使用纱线添加砌体布局

yarn add masonry-layout

我的 webpack 配置：

...
.autoProvideVariables({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
})

我的应用程序.js

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

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

const $ = require('jquery');

import * as masonry from 'masonry-layout';

$('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 160
});

我的索引.html.twig

<div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item grid-item--width2 grid-item--height2"></div>
    <div class="grid-item grid-item--height3"></div>
    <div class="grid-item grid-item--height2"></div>
    <div class="grid-item grid-item--width3"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--height2"></div>
    <div class="grid-item grid-item--width2 grid-item--height3"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--height2"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--width2 grid-item--height2"></div>
    <div class="grid-item grid-item--width2"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--height2"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--height3"></div>
    <div class="grid-item grid-item--height2"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--height2"></div>
</div>

我总是收到此错误：

未捕获的类型错误：r(...)(...).masonry 不是 function

如何使用 webpack 正确添加砌体？

Answer 1

文件指出：

要将 Masonry 作为 jQuery 插件与 Webpack 一起使用，您需要使用 jQuery Bridget

参见： https://masonry.desandro.com/extras.html