When used in browserify, gridstack is not correctly exported, which breaks the gridstack jquery drag plugin

[jaapz]

I'm trying to move from 0.2.x to 0.3.0, however the module exporting code is not compatible with Browserify (or probably any CommonJS system).

The jQueryUI drag and drop plugin never correctly initializes.

This is because it is calling

try { GridStackUI = require('gridstack'); } catch(e) {}

Which always returns an empty object, because the gridstack.js file never actually exports anything, but instead "exports" to the global window scope, as seen in gridstack.js line 20:

var scope = window;

And gridstack.js line 1729:

scope.GridStackUI = GridStack;

exports is never actually used, so calling require('gridstack') will then always return an empty object.

So I think the module loading code for both gridstack.js and gridstack.jQueryUI.js should be altered to export using the module.exports CommonJS pattern.

I think a good way to do this is looking at how backbonejs does this.

[jaapz]

To add to this, when I alter the gridstack source code to explicitly export using module.exports (always), it works. It also works when I remove the require('gridstack') line, because then it will get the GridStackUI object from the global window.

[jaapz]

I think this might also be why importing 0.3.0 in Aurelia breaks (#613)

[radiolips]

Thanks, @jaapz ! We'll look into this. Thanks for providing the Backbone example.

[radiolips]

@jaapz also, do you want to put in a PR, or provide more example code?

[jaapz]

I'll try to look into this some more later today, and see if I can find the time to put in a PR

[radiolips]

@jaapz Have you had any time for this? I spent awhile on it but got very lost. I'm not great at this exporting code.

[rpionke]

@jaapz Can you please provide example code how this works and what you have changed?

[jaapz]

So, during a run of dependency upgrades (bootstrap 3 -> 4, jquery to latest version, you know the drill) I came across this issue and decided that after more than a year my "later today" has finally come ;)

I fixed the issue on the latest version of develop and opened a pull request. I'm currently using that fixed repository in our browserify build which seems to work fine.

Would be great to get this in a release so we can finally close this!

@rpionke for now you can use our repo at AdvancedClimateSystems/gridstack.js as it has the fix which correctly exports gridstack for commonjs and requirejs. That repo will only stay up until the fix is released though, after that I will remove it (which will break your builds)!

[rpionke]

@jaapz Thanks for your response and help! I'm using "gridstack": "AdvancedClimateSystems/gridstack.js#develop" in our package.json and require('gridstack') in our main JS file but this still leads to a Uncaught TypeError: $(...).gridstack is not a function. How do you use gridstack with browserify?