Draggable Crashing Ionic 2 / Cordova

[TheAlexPorter 2 Likes (Newbie)]

Hi everyone,

 

I'm experiencing odd behavior. Whenever I reference Draggable ANYWHERE in my Ionic 2 app, Cordova crashes and throws this error:

 

"Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" (screenshot included below).

 

When I run the code in the browser doing "ionic serve", draggable works and everything is great. On the emulator or build, the app crashes. If I remove / comment out draggable, the app runs. There isn't any issue with TweenLite, just Draggable.

 

Has anyone else experienced this before?

[Shaun Gorneau 1,503 Likes (Superhero)]

This looks like an issue with a call an event listener in Cordova ... perhaps passing a null event since cordova calls the toLowerCase method within the event listener on the event itself.

 

Look in any event listener and you'll see

 

var e = evt.toLowerCase();

 

What does your main.js line 149487 look like?

[GreenSock 8,117 Likes (Superhero)]

Yeah, I'm kinda curious - is it problematic in Cordova to add a listener for an event type that doesn't exist? That's the only thing I can think of that may be happening there, like a "touchstart" on a non-touch device(?). I wouldn't expect that to be problematic because if there is no such event, then there simply won't be any dispatched, but perhaps Cordova doesn't handle that properly? 

[GreenSock 8,117 Likes (Superhero)]

I think I see the problem and I can just add " || type" after the event lookup. In other words:

//BEFORE:
element.addEventListener(_touchEventLookup[type], func, capture);

//AFTER:
element.addEventListener(_touchEventLookup[type] || type, func, capture);

Here's an uncompressed version with that edit in place: 
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Does that resolve things for you? 

[TheAlexPorter 2 Likes (Newbie)]

Thank you everyone for your quick responses! I've added the modified version of Draggable like you suggested. When I click, my element moves, once, then this same error fires, but on a different line in Cordova (see attached image).

 

Seems to be something with the "onPress" method. I tried rolling back to GSAP version 1.19.1 and these errors go away, even without the update to Draggable. That version doesn't have the same rotationOrigin that the latest 1.20 version has, so I can't implement the nice rotate to clicked point feature.

 

Thats really what I'm trying to get working. Any ideas on that? Is it possible to wire up the rotationOrigin a different way on version 1.19.1?

 

Note: I can't make any lasting changes to cordova.js. It always fixes itself.

[GreenSock 8,117 Likes (Superhero)]

Are you sure you used the edited version of Draggable that I referenced? 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Seems like maybe you've got an updated version of one method, but not the other. 

[TheAlexPorter 2 Likes (Newbie)]

I was using NPM and updated the file wrong. I reinstalled version 1.20.4 and then added your fix to node_modules/gsap/Draggable.js:

 

element.addEventListener(_touchEventLookup[type] || type, func, capture);

 

Now it's working great! Thank you so much for your help 

[Curly Brackets 0 Likes (Newbie)]

I followed the above steps. However, I am getting this now:

Cannot find module "../TweenLite.js" even tho it obviously exists.

 

Adding this however, fixes the issue (at the end of Draggable.js):

//export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date)

(function(name) {

    "use strict";

    var getGlobal = function() {

        return (_gsScope.GreenSockGlobals || _gsScope)[name];

    };

    if (typeof(module) !== "undefined" && module.exports) { //node

        require("gsap/TweenLite.js");

        require("gsap/CSSPlugin.js");

        module.exports = getGlobal();

    } else if (typeof(define) === "function" && define.amd) { //AMD

        define(["gsap/TweenLite", "gsap/CSSPlugin"], getGlobal);

    }

}("Draggable"));

Edited April 21, 2018 by Curly Brackets
Added possible solution

[GreenSock 8,117 Likes (Superhero)]

FYI, this should be resolved in 1.20.5 which was just released. Enjoy!