Gridstack.js: gridstack.all 1.x import failure

[fuyouping]

vue-element-admin import gridstack.all failure

gridstack.js 1.1.1

in page.vue

import GridStack from '../../plug-in/gridstack/dist/gridstack.all.js'
options = {float: false};
this.grid = GridStack.init(options);

show Error in mounted hook: "TypeError: _gridstackAll.default.init is not a function"

How can I use it correctly？ thanks

[fuyouping]

this way

npm install gridstack
import GridStack from 'gridstack/dist/gridstack.all.js'

The result is the same as above

[tmpduarte]

Same here, there is also a Stackoverflow issue posing what seems to be the exact same problem

[tmpduarte]

a hack I found is to import the following:

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

[adumesny]

Hey guys, yeah there is likely something I'm doing wrong when generating gridstack.all.js (grunt job uglify to combine all files into 1

'dist/gridstack.all.js': ['src/gridstack-poly.js', 'src/jquery.js', 'src/gridstack.js', 'src/jquery-ui.js', 'src/gridstack.jQueryUI.js']

if someone has any build export / webpack expertise I would appreciate the help as I've been focusing on 2.x (typescript re-write and removing jquery from main code) and could use packing help there as well. Let's fix 1.1.1 first!

might be the way I'm defining the init() JS method (want them static in GridStack namespace which I've done in TS just fine)

(function(factory) {
  /* [alain] we compile jquery with our code, so no need to 'load' externally
  if (typeof define === 'function' && define.amd) {
    define(['jquery', 'exports'], factory);
  } else if (typeof exports !== 'undefined') {
    var jQueryModule;

    try { jQueryModule = require('jquery'); } catch (e) {}

    factory(jQueryModule || window.jQuery, exports);
  } else */{
    factory(window.jQuery, window);
  }
})(function($, scope) {
  var GridStack = function(el, opts) {... }
...
  scope.GridStack = GridStack;
  scope.GridStack.Utils = Utils;
  scope.GridStack.Engine = GridStackEngine;
  scope.GridStack.DragDropPlugin = GridStackDragDropPlugin;

  /** initializing the HTML element, or selector string, into a grid will return the grid */
  GridStack.init = function(opts, elOrString) {...};

return scope.GridStack;
});

making them GridStack.prototype.init() would just be regular methods rather than globals but maybe that's what I need to do. Maybe it's an ugify BUG since importing the individual uglify files works ok ???

[fuyouping]

a hack I found is to import the following:

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

thanks。i,m try try

[adumesny]

in my angular app it does work doing
import 'gridstack/dist/gridstack.all.js';
BUT then none of the symbols from .d.ts are found, and doing that instead:
import { GridStack, GridStackElement, GridStackNode, GridstackWidget } from 'gridstack';
fixes the defines but then other code is missing $ jquery stuff (as it doesn't import jq/jq-ui) and doing both complains that
ERROR TypeError: Cannot read property 'init' of undefined
Yeah so not ideal...

[fuyouping]

thinks! its work.

code in https://jsfiddle.net/fuyouping/6mnwy4qs/1/

[adumesny]

so your code works ? can I close this now ?
Tip: in your code you should put the batchUpdate() and commit() outside of the foreach loop! (defeats the purpose otherwise).

[richard-ob]

in my angular app it does work doing
import 'gridstack/dist/gridstack.all.js';
BUT then none of the symbols from .d.ts are found, and doing that instead:
import { GridStack, GridStackElement, GridStackNode, GridstackWidget } from 'gridstack';
fixes the defines but then other code is missing $ jquery stuff (as it doesn't import jq/jq-ui) and doing both complains that
ERROR TypeError: Cannot read property 'init' of undefined
Yeah so not ideal...

I'm using GridStack within an Angular app, however the second option (import { GridStack, GridStackElement, GridStackNode, GridstackWidget } from 'gridstack';) doesn't work for me? I'm able to use GridStack via importing it as a script in Angular CLI, however I want to avoid that, and import in the usual way, including allowing the usage of typings. Presently I'm using the declare var GridStack hack.

The error I get when I use the second option is VSCode saying:
File 'c:/[path]/node_modules/gridstack/dist/gridstack.d.ts' is not a module.ts(2306)

I would raise an issue, but as you've mentioned this here, thought it made sense just to follow it up on this post. Thank you!

[adumesny]

@richard-ob thanks for adding here. Hopefully this will get resolved soon with 2.x

[jasonatball]

Tried importing this in a Vue.js project and ran into the same issue. Tried this:

import 'gridstack/dist/jquery'
import 'gridstack/dist/gridstack'
import 'gridstack/dist/jquery-ui'
import 'gridstack/dist/gridstack.jQueryUI'
export default {
  created() {
    var grid = GridStack.init()
    console.log('grid:' + grid)
  }
}

And the grid was 'undefined' but apparently it loaded because I got no error on GridStack.init().

[adumesny]

@jasonatball any error log messages ? make sure you have a div with '.grid-stack' class (the latest code will warn you if missing).

[jasonatball]

This was my misunderstanding of the Vue.js lifecycle. I needed to put the GridStack.init() in the mounted() lifecycle hook because until then there is no grid-stack div to even initialize against. Sorry for the noise.

[Marius8881]

Same issue with React...

[timothymarois]

The same issue with Vue JS, none of the above work, package completely unsalvagable at the current state.

Hope you can fix this soon.

[adumesny]

I suggest you use 2.0.0 (rc2 right now) as it's ES6 friendly (re-wrote to typescript) and look at
https://github.com/gridstack/gridstack.js/tree/typescript#include
https://github.com/gridstack/gridstack.js/tree/typescript#migrating-to-v2

I have no plans to release 1.x again - onward and forward!
Will close this as soon as v2 is officially out.

@timothymarois Instead of hoping... how about contribution or $ donations ? getting a little ticked off lately for the enormous amount of time I spent with zero help. Thank you to the handful donations...

[adumesny]

this now works in just released 1.2.1 (see release notes)

import 'jquery';
import 'jquery-ui';

import 'gridstack/dist/gridstack-poly'; // optional IE support
import GridStack from 'gridstack';
import 'gridstack/dist/gridstack.jQueryUI';
import 'gridstack/dist/gridstack.css';

but recommend you just use 2.x (native typescript re-write) which only needs this:

import { GridStack, $ } from 'gridstack'; // $ optional if you depend on it, to be removed in 3.x
import 'gridstack/dist/gridstack.css';

might want to also see https://github.com/gridstack/gridstack.js#jquery-application