{"action":"created","issue":{"url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/137","labels_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/137/labels{/name}","comments_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/137/comments","events_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/137/events","html_url":"https://github.com/Hacker0x01/react-datepicker/issues/137","id":95314097,"number":137,"title":"ReferenceError: document is not defined","user":{"login":"andrerpena","id":1581429,"avatar_url":"https://avatars.githubusercontent.com/u/1581429?v=3","gravatar_id":"","url":"https://api.github.com/users/andrerpena","html_url":"https://github.com/andrerpena","followers_url":"https://api.github.com/users/andrerpena/followers","following_url":"https://api.github.com/users/andrerpena/following{/other_user}","gists_url":"https://api.github.com/users/andrerpena/gists{/gist_id}","starred_url":"https://api.github.com/users/andrerpena/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andrerpena/subscriptions","organizations_url":"https://api.github.com/users/andrerpena/orgs","repos_url":"https://api.github.com/users/andrerpena/repos","events_url":"https://api.github.com/users/andrerpena/events{/privacy}","received_events_url":"https://api.github.com/users/andrerpena/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":8,"created_at":"2015-07-15T23:53:45Z","updated_at":"2015-08-27T14:17:11Z","closed_at":null,"body":"When I try to server render using Node.js + Express + ReactRouter, I get this:\r\n\r\n    C:\\Projects\\Git\\gearz\\node_modules\\react-datepicker\\node_modules\\tether\\dist\\js\\tether.js:406\r\n    var el = document.createElement('div');\r\n             ^\r\n    ReferenceError: document is not defined\r\n\r\nYou are assuming `document` exists, which isn't true when you are server rendering.\r\n\r\nThe most curious part is that I'm copying my example from the server rendering example. This is how my component looks like:\r\n\r\n        var Example = React.createClass({\r\n            getInitialState: function () {\r\n                return {date: moment()};\r\n            },\r\n            onChange: function () {},\r\n            render: function () {\r\n                return React.createElement(\r\n                    DatePicker,\r\n                    {\r\n                        selected: this.state.date,\r\n                        onChange: this.handleChange\r\n                    }\r\n                );\r\n            }\r\n        });\r\n\r\nAm I doing anything wrong?"},"comment":{"url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/comments/135448688","html_url":"https://github.com/Hacker0x01/react-datepicker/issues/137#issuecomment-135448688","issue_url":"https://api.github.com/repos/Hacker0x01/react-datepicker/issues/137","id":135448688,"user":{"login":"gabroe","id":10320066,"avatar_url":"https://avatars.githubusercontent.com/u/10320066?v=3","gravatar_id":"","url":"https://api.github.com/users/gabroe","html_url":"https://github.com/gabroe","followers_url":"https://api.github.com/users/gabroe/followers","following_url":"https://api.github.com/users/gabroe/following{/other_user}","gists_url":"https://api.github.com/users/gabroe/gists{/gist_id}","starred_url":"https://api.github.com/users/gabroe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gabroe/subscriptions","organizations_url":"https://api.github.com/users/gabroe/orgs","repos_url":"https://api.github.com/users/gabroe/repos","events_url":"https://api.github.com/users/gabroe/events{/privacy}","received_events_url":"https://api.github.com/users/gabroe/received_events","type":"User","site_admin":false},"created_at":"2015-08-27T14:17:11Z","updated_at":"2015-08-27T14:17:11Z","body":"Well, I'm still using it, I just made a fugly workaround, fortunately the component that contains the datepicker has to re-render after some data gets loaded into the page so what I did is if I canUseDom I render the datepicker, otherwise I just render a simple input.\r\n\r\n```javascript\r\nimport { canUseDOM } from 'react/lib/ExecutionEnvironment';\r\n\r\n...\r\n\r\ndateField = function(label, minDate, date, onChange){\r\n    if(canUseDOM){\r\n      var DatePicker = loadDatePicker();\r\n      return <DatePicker\r\n        dateFormat={'MM/DD/YY'}\r\n        minDate={minDate}\r\n        selected={date}\r\n        maxDate={moment().add(1, 'y')}\r\n        placeholderText={label}\r\n        onChange={onChange}\r\n        />;\r\n    }\r\n    return <input\r\n      type='text'\r\n      placeholder={label}\r\n      groupClassName='input-group-sm'/>;\r\n  },\r\n  loadDatePicker = function(){\r\n    if(DP == null){\r\n      DP = require('react-datepicker');\r\n    }\r\n    return DP;\r\n  };\r\n\r\n...\r\n\r\n<div className='date-field'>\r\n     {dateField('from', moment(), f.getFromDate(), onFromChange)}\r\n</div>\r\n\r\n```\r\n"}}