Can't add masonry to symfony 6 webpack-encore project

Question

I'm working on a symfony 6 project and i'm trying to use webpack encore to add masonry grid.

I'm using this documentation: masonry.desandro.com

I'm using yarn to add masonry-layout

yarn add masonry-layout

my webpack config:

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

My app.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
});

My index.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>

I'm always getting this error:

Uncaught TypeError: r(...)(...).masonry is not a function

How can i correctly add masonry using webpack?

Answer 1

The documentation states:

To use Masonry as a jQuery plugin with Webpack, you need to use jQuery Bridget

See: https://masonry.desandro.com/extras.html