0.3.0 Loading problem with Aurelia.io

[arnonuem]

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.

[radiolips]

@arnonuem Prepare for us a jsfiddle with Aurelia and gridstack and I'll see if I can figure out a fix.

[ZoolWay]

As someone having 0.2.6 running with Aurelia for quite some time I can say this looks like a module loading issue. Question is, which loader is used inside Aurelia (JSPM/SystemJS, Webpack, Aurelia CLI) and how is jQuery and Gridstack.js loaded. I am using JSPM and have installed Gridstack through NPM registry.

[tipa]

Also having problems to import 0.3.0. Using Aurelia + JSPM/SystemJS.
I import gridstack:
import 'gridstack/dist/gridstack.all';

This is what I get:
Uncaught (in promise) Error: (SystemJS) Cannot read property 'registerPlugin' of undefined TypeError: Cannot read property 'registerPlugin' of undefined at eval (http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js:685:35) at eval (http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js:677:5) at Object.eval (http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js:680:2) at eval (http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js:715:4) at eval (http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js:716:3) at eval (<anonymous>) Evaluating http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js Error loading http://localhost:9000/widgets/multi-object-widgets/root-widgets/dashboard.js

When I put this in my config.js:
meta: { "*/gridstack.all.js": { "format": "amd" } },

...I get this:
system.src.js:123 Uncaught (in promise) Error: (SystemJS) Multiple anonymous defines in module http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js Error: Multiple anonymous defines in module http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js at eval (http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js:666:5) at eval (http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js:680:2) at eval (http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js:715:3) at eval (<anonymous>) Evaluating http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js Error loading http://localhost:9000/jspm_packages/npm/gridstack@0.3.0/dist/gridstack.all.js as "gridstack/dist/gridstack.all" from http://localhost:9000/widgets/multi-object-widgets/root-widgets/dashboard.js

[diegotroitino]

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",

[radiolips]

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]

@diegotroitino Can you get your example working, under any circumstance, with resize/drag? I'm trying to verify that a change I've made works, but I can't, because I can't actually get dragging to work. I'm unsure if this is because of code on my side or code in the aurelia project.

[diegotroitino]

To resize/drag work we need the gridstack.jQueryUI.min.js file, right? But when aurelia bundle that, occurs the Uncaught Error: Mismatched anonymous define() module error to run the application.

I created this fiddle https://jsfiddle.net/troits/624t9shu/ with the same code, without Aurelia, and it works fine.

Right, my example don't throw errors because it only refers the gridstack.min.js. To show the related erro, change here to gridstack.all before execute au run --watch

If you prefer, I can test it for you.

[diegotroitino]

@radiolips I changed the way to refer the gridstack. I put the gridstack.js reference and the gridstack.jQueryUI.js separated. With this, began to occur errors of the references of components jQuery ('jquery-ui/data', 'jquery-ui/disable-selection', 'jquery-ui/focusable', ...)

I found the solution for this, that is to map the components to jquery-ui like this answer in stackoverflow. But I don't know how to do that before Aurelia bundle the files.

To solve this, I modified the gridstack.jQueryUI to refer only jquery-ui and it worked like a charm. I even tried that in the jsfiddle example and works too.
I do not know if that is an elegant solution or is necessary for another situation refer each component at gridstack.jQueryUI

Already updated my repository

[arnonuem]

Awesome

[stuartbloom]

Hi, sorry if I am late to the party, and this is a silly question.

I would like to make use of gridsatck in my solution, however, I make use of a build machine that performs an npm install every time a build is kicked off so I won't be able to make a change to the gridstack.jQueryUI file.

I don't currently need drag/drop or resize. I am implementing this as a Aurelia application. Is there anything else I can try?

Thanks in advance