Gridstack movement/resize doesn't work in Electron

[StefanM98]

Subject of the issue

When gridstack.jQueryUI.min.js is imported, this error is produced: Uncaught TypeError: Cannot read property 'registerPlugin' of undefined. This problem seems to be similar to issue #613.

Your environment

• gridstack.js - 0.3.0
• jQuery - 3.3.1
• jQuery-UI - 1.12.1
• Underscore.js - 1.9.0
• Electron - 2.0.0

Steps to reproduce

I've created a repository to exemplify this problem. It's a simple Electron boilerplate that I added jQuery, jQuery UI, Underscore, and gridstack to. Follow the "Quick Start" section to get where I am now. Then, uncomment the line import 'gridstack/dist/gridstack.jQueryUI.js'; in app.js

Expected behavior

gridstack.jQueryUI.min.js should execute with no errors and provide the ability to move and resize the gridstack items.

Actual behavior

When gridstack.jQueryUI.min.js or gridstack.all.js is imported the error mentioned above is produced.

Any help would be greatly appreciated. Thank you.

[radiolips]

Hey, @StefanM98 . I don't have experience with Electron. Have you tried making the changes that ZoolWay put into the ticket you referenced?

[StefanM98]

Hey, @radiolips . I'm trying to implement said changes now. It's not exactly the same solution due to the fact that SystemJS, and JSPM aren't used in this scenario. I have to figure out a similar solution using webpack. It's essentially the same problem which is why I referenced it, but the solution is going to be different with webpack. I'll post an update when I figure it out for others that may have this issue in the future. 👍

[StefanM98]

I've fiddled around with my webpack config with no luck so far. @radiolips do you, or any other members of this community, have any experience with webpack and how to get it to work with gridstack? Essentially, gridstack.jQueryUI.js needs to load as AMD with jquery-ui as a dependency. That should solve this issue.

I'm not very experienced with webpack so I'm struggling to figure this out. Any help would be greatly appreciated.

[StefanM98]

So I haven't quite figured out how to fix this problem using webpack, but I have found a workaround that works in my case. Since Gridstack already uses jQuery, I decided to make use of jQuery.getScript() to only load gridstack.jQueryUI.min.js once jquery-ui has finished loading.

$.getScript( "./deps/jquery-ui.min.js" )
  .done(function( script, textStatus ) {
    $.getScript( "./deps/gridstack.jQueryUI.min.js" )
      .done(function( script, textStatus ) {
        // Do anything that requires gridstack here
      })
  })
  .fail(function( jqxhr, settings, exception ) {
    console.log( "Triggered ajaxError handler." );
  });

This isn't an ideal solution, but it works without stalling the entire application. I'm updating the boilerplate mentioned earlier, and closing this issue until a better solution is found.

[radiolips]

I'm glad you were able to figure it out, @StefanM98 , even if it's just a temporary workaround. When you do get it solved, let me know (I wish I could figure it out, but I'm really not great with the loaders), and I'll update docs or the code.

[StefanM98]

Thanks @radiolips , will do!