gridstack.js: ES6 module doesn't work without 'gridstack/dist/jquery' - 2 versions of jquery bundled as a result

Subject of the issue

When importing as ES6 module gridstack doesn’t recognize existing jquery import. You must import gridstack/dist/jquery for gridstack to work. This results in unnecessary 2 versions of jquery being bundled.

Your environment

  • version of gridstack.js: 1.1.2
  • any browser
  • jquery 3.4.1, 3.5.1 tested

Steps to reproduce

Uncomment any commented line and comment out import 'gridstack/dist/jquery'

// import $ from 'jquery';
// import { jQuery } from 'jquery';
// import 'jquery';

import 'gridstack/dist/jquery'; // doesn't work without this line

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

Expected behaviour

Importing standard jquery should be sufficient for gridstack to work.

Actual behaviour

Instead it results in the following error

gridstack.jQueryUI.js:16 Uncaught ReferenceError: jQuery is not defined
    at gridstack.jQueryUI.js:16
    at Object.15df57f963fba245a3dd1dd99844b498 (gridstack.jQueryUI.js:18)
    at newRequire (app2.a577e0b1.js:68)
    at localRequire (app2.a577e0b1.js:80)
    at Object.dc637c3e3d40dc66c1f97cf67d9d6d1f.underscore (WidgetGridView.js:13)
    at newRequire (app2.a577e0b1.js:68)
    at localRequire (app2.a577e0b1.js:80)
    at Object.e5e83521c6a34a6c4a7cb873b81ab307../V01 (V01.index.js:15)
    at newRequire (app2.a577e0b1.js:68)
    at localRequire (app2.a577e0b1.js:80)

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 17 (15 by maintainers)

Commits related to this issue

Most upvoted comments

got it working in 2.x where I’m able to do this and all works great (though you can’t import your own jquery, but we do export $ now). Will push 2.x out hopefully soon…

import { GridStack, $ } from 'gridstack';
import 'gridstack/dist/gridstack.css';