Interact.js: Uncaught TypeError: Cannot read property 'pageX' of undefined

[73rhodes]

This error originates from the pointerMove event listener, initiating a call chain to setEventXY and getPageXY, where evidently the pointer is has been passed in as undefined.

Seen on Google Chrome and Chrome Mobile, running on WIndows 8.1, Android 4.4, Windows (version undefined) and Linux.

getPageXY should handle null pointer exceptions (no pun intended).

[taye]

Could you copy the full stack trace and paste it here? Which version of interact.js are you using?

[73rhodes]

interact.js v1.2.4

The stack trace is from a compressed bundle, so not very readable:

bundle.js:5:22346 f
e.client.vx=e.client.x/a,e.client.vy=e.client.y/a}function f(e,t,n){return n=n||{},e=e||"page",n.x=t[e+"X"],n.y=t[e+"Y"],n}function y(e,t,n){return t=t||{},e instanceof Y?/inertiastart/.test(e.type)?(

bundle.js:5:22628 y
=n.inertiaStatus.sy):(t.x=e.pageX,t.y=e.pageY):Ft?(f("screen",e,t),t.x+=pt.scrollX,t.y+=pt.scrollY):f("page",e,t),t}function g(e,t,n){return t=t||{},e instanceof Y?/inertiastart/.test(e.type)?(d(t,n.i

bundle.js:5:21793 h
,e.timeStamp=t.timeStamp}function h(e,t,n){t||(t=n.pointerIds.length>1?w(n.pointers):n.pointers[0]),y(t,Tt,n),e.page.x=Tt.x,e.page.y=Tt.y,g(t,Tt,n),e.client.x=Tt.x,e.client.y=Tt.y,e.timeStamp=(new Dat

bundle.js:6:11237 Object.U.setEventXY
){return y(e,t,this)},getClientXY:function(e,t){return g(e,t,this)},setEventXY:function(e,t){return h(e,t,this)},pointerOver:function(e,t,n){function a(e,t){e&&O(e,n)&&!B(e,n,n)&&I(e,n,n)&&ut(n,t)&&(o

bundle.js:6:17675Object.U.pointerMove
prepared.name+"Start"](this.downEvent))},pointerMove:function(e,t,a,o,r){this.recordPointer(e),this.setEventXY(this.curCoords,e instanceof Y?this.inertiaStatus.startEvent:void 0);var i,s,l=this.curCoo

bundle.js:5:29662 HTMLDocument.<anonymous>
gedTouches.length;a++){var i=t.changedTouches[a];n=j(i,t.type,o),n&&(n._updateEventTargets(o,r),n[e](i,t,o,r))}else{if(!zt&&/mouse/.test(t.type)){for(a=0;a<wt.length;a++)if(!wt[a].mouse&&wt[a].pointer

But, from a quick review of the code it's clear that there are cases where the setEventXY method will be called with pointer == undefined

[JulienBier]

Same issue here.

[taye]

Can you use the master version and generate a sourcemap for the bundle then paste the stacktrace here or make a small demo that demonstrates the bug?

[xlc]

I also have this issue in my app. Here is a plunker to reproduce it: http://embed.plnkr.co/isvvZTN92aTmPUZLDtND/preview

Using Chromebook Version 45.0.2454.15 beta (64-bit)
Steps are:

1. Drag one of the div using mouse.
2. Use touch gesture to zoom in.
3. Use touch gesture to zoom out.
4. Exception logged in developer console.

Uncaught TypeError: Cannot read property 'pageX' of undefined
getXY @ interact.js:657
getPageXY @ interact.js:688
setEventXY @ interact.js:623
Interaction.setEventXY @ interact.js:1325
Interaction.pointerMove @ interact.js:1761target @ interact.js:3248

I also tried on master and not able to reproduce this issue. Is the master version consider stable enough for production? Is any expect release date for next version?

[taye]

@xlc Thanks for the info!

There have so far mostly been bug fixes since the previous release. The biggest change is probably

Added event parameters to actionCheckers and dropCheckers

From commits 88dc583df6df3c44bdd63cb8d17e41971594e2ed and 16d74d433fa6275d5bfa13ac8672b4a4aa33216a.

If you don't use an actionChecker or dropChecker at all then everything will probably work fine. I don't have many devices to test on at the moment so if you do, I'd really appreciate it if you can report any problems or just let me know if everything works.

[xlc]

The problem I discovered before did not exist anymore. However there is still a Uncaught TypeError: Cannot read property 'pageX' of null issue keep happening.

I am using 3550e57c0d599c74ebbe7137337e0a03c8695529

I am not yet able to reproduce it.
Here is the stack trace I got from production logs, the code is minified so I only have line numbers:

https://github.com/taye/interact.js/blob/3550e57c0d599c74ebbe7137337e0a03c8695529/interact.js#L3413
https://github.com/taye/interact.js/blob/3550e57c0d599c74ebbe7137337e0a03c8695529/interact.js#L1913
https://github.com/taye/interact.js/blob/3550e57c0d599c74ebbe7137337e0a03c8695529/interact.js#L1873
https://github.com/taye/interact.js/blob/3550e57c0d599c74ebbe7137337e0a03c8695529/interact.js#L3289

[taye]

This should be fixed now. A new release is due tomorrow or the day after. Thanks for all the information!

[marian-r]

I am still experiencing both issues, the original one reported by @73rhodes and the other one reported by @xlc.
Stack trace for the orignal issue:

• getXY()
• getPageXY()
• setEventXY()
• pointerMove()

Stack trace for the second issue is the same as here https://github.com/taye/interact.js/issues/251#issuecomment-139095571.

I am using the https://github.com/taye/interact.js/commit/b3bfc3e5510f6856b3ba096d8423aca6203034c8 version.

[taye]

@marian-r Can you try with the very latest commit from master? It's been bundled in the unstable branch so you can download it from https://rawgit.com/taye/interact.js/unstable/dist/interact.js if you don't want to build it yourself.

[marian-r]

I am using it via Bower. Can I get the latest version from master via Bower, but the version which is built already?

[taye]

According to this, using this in your bower.json file should work:

"interact": "https://github.com/taye/interact.js.git#unstable"

[marian-r]

Thanks, I didn't realized you include the bundled version in the unstable branch. Can that branch be used in production? Because the name is not promising. Anyway, to test it in production I would need #295 to be fixed as I did in #296, but only for stable branch. Currently, I'm using my forked version with the fix in production. Do you see the fix happening soon?

[taye]

The next version is planned to be 1.3.0. The minor version is being bumped because of the significant changes of #231. I've decided not to make changes for the 1.2.* code and all improvements since the 1.2.6 release have been for the 1.3.0 target. A few of the bugs that are currently in the stable branch have been fixed in the unstable branch which I find is quite stable, but you might come across a surprise or two. I'll try to fix bugs (or at least provide workarounds) quickly especially if they're in production.

I've implemented a fix for #295 and updated unstable to include it.

[marian-r]

Oh, thanks a lot for all your work. I would like to try the version 1.3.0, just I don't have enough time at the moment. But I will let you know as soon as I manage to use it.

[nttrung143]

@taye: sorry for ask, do you have any release plan for 1.3.0
I tried unstable on my app for Windows Surface Pro-3 (use WinJS), it's fixed the problem "Cannot read property 'pageX' of undefined", but it's unstable and cause other bug.
Stable version work fine with only "Cannot read property 'pageX' of undefined" problem.

[taye]

@nttrung143 Can you describe the new bugs that you're seeing and provide stack traces if exceptions are being raised?

I really don't know when the next version will come. I have a lot of other work to do and can't work on writing tests to find bugs. What would probably make the release happen sooner would be for people to try the latest version and report any bugs that they find. If they don't find any bugs and are using interact.js for fairly complex interactions, it would also be helpful if they mention in the Gitter chatroom that things are working well for them and list which features they're using.

[milkshoes]

We are also seeing errors with the Interact 1.2.6 via bower.

"Uncaught TypeError: a.getClientRects is not a function" - interact.js:717
"Uncaught TypeError: Cannot read property 'pageX' of null" - interact.js:3472
"Uncaught TypeError: Cannot read property 'timeStamp' of null" - interact.js:3555

Also we tried updating our bower.json file to the following::
"interact": "https://github.com/taye/interact.js.git#unstable"

But we still get these errors. Any suggestions?

Update:

I've noticed that when I do NOT have a dropzone engaged I am able to drag. However, this isn't ideal since we do need a dropzone to actually drop.

Below is my dropzone that seems to cause the errors with the actual dragging:

interact = interact || window.exports.interact;
interact(element).dropzone({
accept: '.js-draggable',
overlap: 0.1,
ondragenter: onDragEnter,
ondragleave: onDragLeave,
ondrop: onDrop
});

Seems like it might have something to do with passing in an (element) into the dropzone?

[taye]

Can you open a new issue and provide information about the errors you're getting with the unstable version including browser version and stack traces (preferably with line numbers in the source files by using source maps).

[marian-r]

@taye this issue is still not fixed in the latest version from unstable branch. Any ideas?

[taye]

@marian-r sorry for the delay. Can you post a stack trace and a brief description of your application?

[abrbhat]

Here is the stacktrace I am getting for this error:

Uncaught TypeError: Cannot read property 'pageX' of undefined interact.js:649 
getXY @ interact.js:649
getPageXY @ interact.js:666
setEventXY @ interact.js:610
Interaction.setEventXY @ interact.js:1319
Interaction.pointerMove @ interact.js:1782
(anonymous function) @ interact.js:3323

[kairiruutel]

For me it's the same:

TypeError: Cannot read property 'pageX' of undefined
at type (../libs/interact.js:649:0)
at getXY (../libs/interact.js:666:0)
at getPageXY (../libs/interact.js:610:0)
at setEventXY (../libs/interact.js:1319:0)
at setEventXY (../libs/interact.js:1782:0)
at pointer (../libs/interact.js:3323:0)

[taye]

@abrbhat @kairiruutel try with the unstable branch.

[stbaer]

The unstable branch doesn't work for me (using browserify)
Cannot find module './src/utils/window' from 'node_modules/interact.js/dist

[marian-r]

@taye, unfortunately, the error is present in the unstable branch as I mentioned here https://github.com/taye/interact.js/issues/251#issuecomment-192637071

[kairiruutel]

Are there any updates related to the "TypeError: Cannot read property 'pageX' of undefined"?

[alanshaw]

Same here...

[alanshaw]

I'm using leaflet.js on the page, and get this error when dragging the map...

[Mike-Benoit]

We're seeing the exact same issue reported too, however I'm not able to replicate it on demand myself.

[kairiruutel]

It seems that in some cases, using touch events, the this.addPointer(pointer) is not called and pointer is not added to this.pointers array and becomes undefined as @73rhodes mentioned.
One, not perfect but possible way would be to call this.addPointer(pointer) once it's not found during recording:

  recordPointer: function (pointer) {
        var index = this.mouse? 0: indexOf(this.pointerIds, getPointerId(pointer));
        if (index === -1) {
            this.addPointer(pointer);
            return;
        }
        this.pointers[index] = pointer;
    }

[taye]

I'm sorry for the not sorting this out after so long. I'll begin to investigate this issue again in the coming days.

[taye]

There's a new unstable build. Please update and and report any issues. A demo to reproduce this bug would be very helpful as I haven't encountered it.

[kelvin4incubit]

// I am still having the same problem at this line of code, it says getAttribute is not defined

var x = (parseFloat(target.getAttribute('data-x')) || 0);
var y = (parseFloat(target.getAttribute('data-y')) || 0);

[irisjae]

It used to be clashing with dragging the handle in noUISlider. However with the unstable build this error is gone! Thanks @taye.

[AlecRust]

Also unable to build this unstable branch with Browserify:

Cannot find module './src/utils/window' from 'node_modules/interact.js/dist

[taye]

@AlecRust The unstable branch is already built with the bundled files and source maps in the dist/ directory. You can build from the master branch instead which doesn't have a dist/ directory.

[stevelove]

@taye I haven't tried the unstable branch, but I can easily reproduce this issue in Chrome 55.0.2883.75 on http://interactjs.io/

Steps to reproduce:

1. Make sure your browser window is not maximized.
2. Open the Chrome Developer Tools console.
3. Visit http://interactjs.io/
4. Move your mouse off of, then back onto the browser window again.
5. Observe that each time your mouse moves onto the browser window, Uncaught TypeError: Cannot read property 'pageX' of undefined appears in the console.

Alternative reproduction: The error appears simply by moving your mouse onto the webpage from the browser chrome area (tabs, address bar, bookmarks, etc).

[dingquantracy]

I just come across the same problem as @stevelove , and I have tried v1.3.0, the error is gone but the interact doesn't work itself , why? Are there any difference of two versions @taye

[danwild]

I'm seeing the same issue as above (as noted by stevelove), with npm pkg v1.2.6.

Just updated to Chrome 55.0.2883.95 (64-bit, OSX) yesterday, so I guess that's what did it, as I run v1.2.6 in a couple of apps and have never seen this issue before.

[sken]

Seeing the same issue in version 1.2.6 since Chrome Update

[arlegotin]

This error fires every few seconds in v1.2.6:

OS X, Chrome 55.0.2883.95

[kjar3]

I get (above) error "Cannot read property 'pageX' of undefined" when moving my mouse in and out of the chrome browser window

[naivefun]

comes again.

[oliveremi]

Getting the same error + makes chrome tab crash when using draggablev1.2.6

[animator013]

Yup same error when moving mouse out of the webpage content (out of chrome). Also when debug console is open and I move the mouse out of the content to the console, this error comes out. The pointer object is undefined as @naivefun also pointed out.

Is there any fix? It's very annoying.

Safari is working. It's most likely a chrome problem.

This bug is discussed here #457.

[alessandro-bottamedi]

Same problem here, i think when upgrade chrome to v55

[salzhrani]

@taye please backport the fix to 1.2.x

[taye]

I've pushed a thing to the stable branch to avoid PointerEvents in Chrome. If you're using v1.2.*, updating to v1.2.8 should solve this issue when it's related to PointerEvents.

[alessandro-bottamedi]

v1.2.8 fix the error for me

[danwild]

Confirmed v1.2.8. fixes the error, thanks @taye!

[EranSch]

v1.2.8 has also resolved this issue for us. Thanks @taye!

[derwaldgeist]

Could you please update the download on interact.io to version 1.2.8? Thanks!

[bebeun]

fixe for me also ! thk uuu !

[kcaporaso]

in the meantime, you can use the 1.2.8 version from a CDN.
```
https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.js