'Packery' (js library) not found only when used in electron


Hi there, first off thanks for this incredible library/package.

I have posted here before - I’ve come from the ionic world and am successfully using electron to package my ionic app for desktops and everything works great.

I am trying to integrate the popular packery library (which works without jQuery as well) into my app. Using it works fine in my app when I do a “ionic serve” which instantiates a live reload instance in my browser.

However the moment I package it with electron and run it, it can’t find those libraries.

The init code (Which does not work when packaged in electron) is

var pckry = new Packery('.grid', {
       itemSelector: '.grid-item',
       columnWidth: 100

   pckry.getItemElements().forEach(function (itemElem) {
       var draggie = new Draggabilly(itemElem);

It throws a ‘Packery not defined’ error inside the app.

I’ve been reading that this is a problem even when including libraries that need jQuery and is related to CommonJS. I tried to replicate the instructions with these libraries by loading it like so:

<script src="./external/packery.pkgd.js" onload="window.Packery = module.exports;"></script>
<script src="./external/draggabilly.pkgd.js" onload="window.Draggabilly = module.exports;"></script>

But this throws other errors. I’m sure I’m not doing this right. Given that just doing a regular script src include works in ionic serve I’m hoping only a minor tweak is needed to get it working with electron package (ionic does not use jquery)

I also tried duplicating the code I found here https://github.com/metafizzy/packery/blob/master/js/packery.js#L25
by doing

<script src="./external/packery.pkgd.js" onload="module.exports = factory(require('get-size'),require('outlayer'),require('./rect'),require('./packer'),require('./item'));window.Packery=module.exports;"></script>

That too resulted in Packery not found.

So can someone advise on how to get this working within electron?


Finally after many failed attempts, the only solution that worked was to disable node integration. Yay!


I use packery with jQuery and jQuery bridget. Maybe this helps

    window.$ = window.jQuery = require('jquery');
    var jQBridget = require('jquery-bridget');

    var Packery = require('packery');
    // make Packery a jQuery plugin
    $.bridget( 'packery', Packery );

    var Draggabilly = require('draggabilly');
    // make Draggabilly a jQuery plugin
    $.bridget( 'draggabilly', Draggabilly );


Sounds like it’s caused by a known Electron/jQuery issue, in which jQuery isn’t attached to window, because it can see there’s a module.

This may fix it: $window.$ = $window.jQuery = require('./js/lib/jquery.js');

If not, you could use Packery, etc through npm. This is the approach that I take, I’m using Cordova for both mobile and Electron builds, I can check if jQuery exists, and if not I’m in Electron and need to require it and anything else Electron specific.

I think it’s quite a clean approach if you have multiple platforms with a single codebase.