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

#1

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);
       pckry.bindDraggabillyEvents(draggie);
   });

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?

#2

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

#3

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

<script>
    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 );
</script>
#4

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.