gridstack.js: 0.3.0 Loading problem with Aurelia.io

When using Gridstack 0.3.0 (gridstack.all.js) with Aurelia the following error message occurs:

Example HTML code:

  <div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
       <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2"><div class="grid-stack-item-content">1</div></div>
       <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4"><div class="grid-stack-item-content">2</div></div>
       <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2" data-gs-min-width="2" data-gs-no-resize="yes"><div class="grid-stack-item-content"> <span class="fa fa-hand-o-up"></span> Drag me! </div></div>
       <div class="grid-stack-item" data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">4</div></div>
       <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">5</div></div>
       <div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4"><div class="grid-stack-item-content">6</div></div>
       <div class="grid-stack-item" data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2"><div class="grid-stack-item-content">7</div></div>
       <div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">8</div></div>
       <div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2"><div class="grid-stack-item-content">9</div></div>
       <div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">10</div></div>
       <div class="grid-stack-item" data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">11</div></div>
   </div>

Example JS code:

        var options = {
            cellHeight: 80,
            verticalMargin: 10
        };
        $('.grid-stack').gridstack( options );

Uncaught Error: Mismatched anonymous define() module: function (a,b){
// jscs:enable requireCamelCaseOrUpperCaseIdentifiers
/**
    * @class GridStackDragDropPlugin
    * Base class for drag'n'drop plugin.
    */
function c(a){this.grid=a}var d=window....

and

Uncaught Error: Mismatched anonymous define() module: function (a,b,c){/**
    * @class JQueryUIGridStackDragDropPlugin
    * jQuery UI implementation of drag'n'drop gridstack plugin.
    */
function d(a){c.GridStackDragDropPlugin.call(this,a)}window;return......

I have no idea what is going on. But since aurelia is a framework this might be an issue in those two parties playing together.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 25 (7 by maintainers)

Most upvoted comments

Thanks, @diegotroitino ! That’ll be helpful for me to throw together and make sure I’m actually fixing it. I’m working on a few bugs/features simultaneously, but I will make sure that your example is working for version 1.0.0.

radiolips on May 15, 2017

folks, dont go spending any time on this, i have it figured out by using the repo @diegotroitino has the fix in 😃 was simpler than I thought.

Thanks

stuartbloom on May 29, 2017

I’m using Aurelia with Aurelia CLI and I had the same problem. So I created a repository to exemplify this. https://github.com/diegotroitino/aurelia_gridstack

Follow the “Problem” section on my README:

There is a problem with the drag and drop and the resize features. The gridstack 0.3.0 need to refer gridstack.min.js and gridstack.jQueryUI.min.js, or only gridstack.all.js;

Currently this project just uses the gridstack.min.js file because when refer to the gridstack.jQueryUI.min.js the following errors occur:

Uncaught Error: Mismatched anonymous define() module: function (a,b){function c(a){this.grid=a}var d=window,e=function(a,b,c)
{var d=function(){return console.warn("gridstack.js: Function `"+b+"` is deprecated as of v0.2.5 and has been replaced with 
`"+c+"`. It will be **completely** removed in v1.0."),a.apply(this,arguments)};
...
http://requirejs.org/docs/errors.html#mismatch
    at makeError (vendor-bundle.js:3952)
    at intakeDefines (vendor-bundle.js:5038)
    at vendor-bundle.js:5236

Uncaught Error: Mismatched anonymous define() module: function (a,b,c){function d(a)
{c.GridStackDragDropPlugin.call(this,a)}window;return
c.GridStackDragDropPlugin.registerPlugin(d),d.prototype=Object.create(c.GridStackDragDropPlugin.prototype),
d.prototype.constructor=d,d.prototype.resizable=function(c,d)
...
http://requirejs.org/docs/errors.html#mismatch
    at makeError (vendor-bundle.js:3952)
    at intakeDefines (vendor-bundle.js:5038)
    at vendor-bundle.js:5236

To see this error, change aurelia.json the line "main": "gridstack.min", to "main": "gridstack.all",

diegotroitino on May 15, 2017