Skip to content

Commit cd0ba24

Browse files
committed
Fix node server side react rendering. Window undefined
When compiling react components server side, window function throws error: /app/components/react-draggable.js:62 var isTouchDevice = 'ontouchstart' in window // works on most browsers ^ ReferenceError: window is not defined
1 parent a195ee4 commit cd0ba24

File tree

1 file changed

+10
-2
lines changed

1 file changed

+10
-2
lines changed

lib/draggable.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,16 @@ function matchesSelector(el, selector) {
4949
}
5050

5151
// @credits: http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript/4819886#4819886
52-
var isTouchDevice = 'ontouchstart' in window // works on most browsers
52+
/* Conditional to fix node server side rendering of component */
53+
if (typeof module !== "undefined" && typeof require !== "undefined") {
54+
// Do Node Stuff
55+
var isTouchDevice = false;
56+
57+
} else {
58+
// Do Browser Stuff
59+
var isTouchDevice = 'ontouchstart' in window // works on most browsers
5360
|| 'onmsgesturechange' in window; // works on ie10 on ms surface
61+
}
5462

5563
// look ::handleDragStart
5664
//function isMultiTouch(e) {
@@ -402,7 +410,7 @@ module.exports = React.createClass({
402410
var directionY = clientY < parseInt(this.state.clientY, 10) ? -1 : 1;
403411

404412
clientX = Math.abs(clientX - parseInt(this.state.clientX, 10)) >= this.props.grid[0]
405-
? (parseInt(this.state.clientX, 10) + (this.props.grid[0] * directionX))
413+
? (parseInt(this.state.clientX, 10) + (this.props.grid[0] * directionX))
406414
: this.state.clientX;
407415

408416
clientY = Math.abs(clientY - parseInt(this.state.clientY, 10)) >= this.props.grid[1]

0 commit comments

Comments
 (0)