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/[email protected]/dist/gridstack.all.js:685:35) at eval (http://localhost:9000/jspm_packages/npm/[email protected]/dist/gridstack.all.js:677:5) at Object.eval (http://localhost:9000/jspm_packages/npm/[email protected]/dist/gridstack.all.js:680:2) at eval (http://localhost:9000/jspm_packages/npm/[email protected]/dist/gridstack.all.js:715:4) at eval (http://localhost:9000/jspm_packages/npm/[email protected]/dist/gridstack.all.js:716:3) at eval (<anonymous>) Evaluating http://localhost:9000/jspm_packages/npm/[email protected]/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/[email protected]/dist/gridstack.all.js Error: Multiple anonymous defines in module http://localhost:9000/jspm_packages/npm/[email protected]/dist/gridstack.all.js at eval (http://localhost:9000/jspm_packages/npm/[email protected]/dist/gridstack.all.js:666:5) at eval (http://localhost:9000/jspm_packages/npm/[email protected]/dist/gridstack.all.js:680:2) at eval (http://localhost:9000/jspm_packages/npm/[email protected]/dist/gridstack.all.js:715:3) at eval (<anonymous>) Evaluating http://localhost:9000/jspm_packages/npm/[email protected]/dist/gridstack.all.js Error loading http://localhost:9000/jspm_packages/npm/[email protected]/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

[radiolips]

Hey, @stuartbloom ! If you don't need drag/drop/resize, you are fine if you simply don't use the gridstack.jqueryui file!
Dylan

[stuartbloom]

@radiolips Thanks Dylan

That's great to know. I will hopefully spend some time over the next day or so implementing my new dashboard. Do you have any simple Aurelia examples?

Thanks again

[radiolips]

I don't, but maybe one of the people on this thread could offer some help? @diegotroitino @arnonuem @tipa @ZoolWay

[stuartbloom]

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

[diegotroitino]

I'm happy to tell you that I have fixed this issue in my project "without any hack"!!

I changed the package jquery-ui-dist to original jquery-ui and just refer to data.js file. With this, the aurelia-cli indentify the jquery-ui path and load the anothers dependencies before bundle the files.

I just updated my repository

Even so, i'm still hungry by the next version without jquery-ui dependency.
Congrats for job and helps.

[stuartbloom]

@diegotroitino Hey Diego I am now trying to implement Gridstack in my solution, however, the line $('.grid-stack').gridstack(this.options); fails with the following exception:

I have gidstack included in my packages and aurelia json files and have <require from="gridstack/gridstack.min.css"></require> in the head of my views template. Would you know if I am missing something?

Thanks in advance

[diegotroitino]

@stuartbloom, did you add the import of gridstack like this in your dashboard class?

[stuartbloom]

@diegotroitino of course, thank you so very much :)

[tipa]

Still unable to get the problem solved. Diegos repository didn't help too, unfortunately (but maybe I am just too silly).
This is the line where it crashes when I try to use v0.3.0:

[ZoolWay]

@tipa You seem to be the only other one here using Aurelia with JSPM like me :)

Actually, SystemJS has by default a problem to fill in the GridStackUI object for the plugin which itself then fails to register. The GridStackUI object I get in gridstack.jQueryUI.js with just an empty object without any prototypes. GridStack itself has also registered itself to the window object.

This is a current workaround which makes it work:

In SystemJS configuration, add a meta entry to create a global for GridStackUI:

    "gridstack/dist/gridstack.jQueryUI": {
      globals: {
        'GridStackUI': 'gridstack'
      }
    }

In gridstack.jQueryUI.js change at line 20:

})(function ($, _, GridStackUI) {
  var scope = window;
  function JQueryUIGridStackDragDropPlugin(grid) {

to this:

})(function ($, _, GridStackUI) {
  var scope = window;
  if ((Object.keys(GridStackUI).length == 0) && (Object.keys(scope.GridStackUI).length > 0)) {
    GridStackUI = scope.GridStackUI;
  }
  function JQueryUIGridStackDragDropPlugin(grid) {

As you can see, I check if I get an empty GridStackUI object and if there is one in window which is better.

There must be a better way to tell SystemJS, still figuring it out.

[ZoolWay]

Okay, looks like I can provide a solution to use 0.3.0 with SystemJS 0.20 without hacking any code.

In my SystemJS configuration (e.g. jspm.config.js), I added this meta information:

        "npm:[email protected]/dist/gridstack.js": {
            "format": "amd"
        },
        "npm:[email protected]/dist/gridstack.jQueryUi.js": {
            "format": "amd",
            "deps": [
                "jquery-ui"
            ]
        }
    },

Within my aurelia component, I just import all things like this:

import 'jquery-ui';
import 'gridstack';
import 'gridstack/dist/gridstack.jQueryUI.js';

Key seemed to be that both modules had to be set to format amd. That way the submodule got the parent module correctly injected.

[radiolips]

@ZoolWay You are amazing. Great job figuring that out!

So, um, I don't know. Is it a bug? Is it not a bug?

[ZoolWay]

@radiolips That's what I am asking myself, too 🍶

Should the modules be autodectected to be AMD? Maybe, maybe not because GridStack wants to provide multiple module formats? I am not sure as understanding JavaScript module formats and loading still gets me headaches. I tried to get to know more on how SystemJS loads on Gitter but @guybedford was not around while I solved the problem. Maybe he can give a small hint and the GridStack team can do a better job?

Also I could not get using gridstack.all instead of loading those two separately making work but I am happy it works now :D

[guybedford]

The configurations added in #613 (comment) could be included in the package.json of this project on the next publish (optionally under a "jspm" prefix) or put directly in the jspm registry to make it work today. Happy to take a registry PR on that @ZoolWay if you're interested.

[radiolips]

@guybedford This is obviously very late, but could you put in a PR? I don't fully understand the request, but if I have a PR to look at, I'm sure I'll be able to better recognize what's going on.