CODEWITHSUNDEEP
javascriptsymfonywebpackjquery-masonrywebpack-encore
Khaled Boussoffara
Khaled Boussoffara

Reputation: 1771

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

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 ?

Upvotes: 0

Views: 157

Answers (1)

Fracsi
Fracsi

Reputation: 2314

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

Upvotes: 0

Related Questions