Comments (14)
👍
from react-datepicker.
Getting this same issue still in 0.11..
from react-datepicker.
I'm not really that well versed in the SSR bit, but shouldn't #113 have fixed this?
from react-datepicker.
I'm having the same issue... (node ssr) If I require the datepicker on the server without even using it it shows that error. A workaround I found is that if I require it just before I open the picker I don't see it, in my case I will never render the picker on the server side, so it works.
I tried to locate the issue and seems to be with tether itself,
see:
var transformKey = (function () {
var el = document.createElement('div');
var transforms = ['transform', 'webkitTransform', 'OTransform', 'MozTransform', 'msTransform'];
for (var i = 0; i < transforms.length; ++i) {
var key = transforms[i];
if (el.style[key] !== undefined) {
return key;
}
}
})();
That code gets executed when you include tether. Does this have to do anything with the way the datepicker is being bundled with webpack? Sorry I have to do something else so I cant keep digging. If I have time later I'll do it.
from react-datepicker.
Right, I think I know where this issue is coming from. I was a bit confused, as we clearly only load Tether when document
is defined, but then I realised that we just figured out that the webpack externals
feature has a strange side-effect: if you say you expect a dependency to be global, it will make it global if it isn't already.
I'll have to dig into this, we noticed this @Hacker0x01 when we tried to upgrade and suddenly our underscore was replaced by lodash in the global namespace.
from react-datepicker.
Has there been any progress on this? I'm still getting "document is not defined" when upgrading to 0.11.4, and have to revert to 0.8.0.
from react-datepicker.
Getting same error in 0.12. Are there any workarounds?
from react-datepicker.
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.
import { canUseDOM } from 'react/lib/ExecutionEnvironment';
...
dateField = function(label, minDate, date, onChange){
if(canUseDOM){
var DatePicker = loadDatePicker();
return <DatePicker
dateFormat={'MM/DD/YY'}
minDate={minDate}
selected={date}
maxDate={moment().add(1, 'y')}
placeholderText={label}
onChange={onChange}
/>;
}
return <input
type='text'
placeholder={label}
groupClassName='input-group-sm'/>;
},
loadDatePicker = function(){
if(DP == null){
DP = require('react-datepicker');
}
return DP;
};
...
<div className='date-field'>
{dateField('from', moment(), f.getFromDate(), onFromChange)}
</div>
from react-datepicker.
Just out of curiosity... Do you get any error for inconsistency between
whats been rendered on the client and on the server?
Em Qui, 27 de ago de 2015 11:17, Gabriel Espinola [email protected]
escreveu:
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.import { canUseDOM } from 'react/lib/ExecutionEnvironment';
...
dateField = function(label, minDate, date, onChange){
if(canUseDOM){
var DatePicker = loadDatePicker();
return <DatePicker
dateFormat={'MM/DD/YY'}
minDate={minDate}
selected={date}
maxDate={moment().add(1, 'y')}
placeholderText={label}
onChange={onChange}
/>;
}
return ;
},
loadDatePicker = function(){
if(DP == null){
DP = require('react-datepicker');
}
return DP;
};...
{dateField('from', moment(), f.getFromDate(), onFromChange)}—
Reply to this email directly or view it on GitHub
#137 (comment)
.
from react-datepicker.
Same error
import DatePicker from 'react-datepicker';
with
<DatePicker />
Trace:
[1] [piping] error given was: ReferenceError: document is not defined
[1] at /Users/a/b/c/node_modules/react-datepicker/node_modules/tether/dist/js/tether.js:406:12
[1] at /Users/a/b/c/node_modules/react-datepicker/node_modules/tether/dist/js/tether.js:415:3
[1] at i (/Users/a/b/c/node_modules/react-datepicker/node_modules/tether/dist/js/tether.js:7:22)
[1] at Object.<anonymous> (/Users/a/b/c/node_modules/react-datepicker/node_modules/tether/dist/js/tether.js:11:2)
[1] at Module._compile (module.js:460:26)
[1] at Module._extensions..js (module.js:478:10)
[1] at Object.require.extensions.(anonymous function) [as .js] (/Users/a/b/c/node_modules/babel-core/lib/api/register/node.js:214:7)
[1] at Module.load (module.js:355:32)
[1] at Module._load (module.js:310:12)
[1] at Function.module._load (/Users/a/b/c/node_modules/piping/lib/launcher.js:32:16)
from react-datepicker.
To anyone interested I created a small wrapper, that you can import instead of the DatePicker.
It just renders an input field serverside and on the client it passes the props along using ES7 spread syntax.
I just
import {default as DatePicker} from './IsomorphicDatePicker';
And it seems to work fine.
https://gist.github.com/Hagbarth/2eeb59bcbc303313a10e
from react-datepicker.
Thanks!, It looks good, I like to use canUseDom
instead of checking for document, my2c
import { canUseDOM } from 'react/lib/ExecutionEnvironment';
from react-datepicker.
I also had this problem when running mocha tests, as the import of Datepicker fails because it tries to access 'document' before jsdom() is called in the test (which is what makes 'document' available). I fixed this by moving the require of Datepicker into the render() method of the component that uses it rather than having it as an import at the top.
from react-datepicker.
Fixed.
from react-datepicker.
Related Issues (20)
- Change Text in weeknumber
- Unnecessary state change occurs when using the open prop HOT 1
- Enhancement Request: Customizable Time Translation in ShowTimeSelect HOT 1
- Narrator/NVDA is not announcing as selected for the selected date.
- Multiple options with the same aria-label
- Unable to select 24 in showTimeSelectOnly HOT 1
- [milestone] Convert the library to typescript HOT 25
- Keyboard not working when showTimeSelectOnly is True HOT 1
- Accessibility: Headings HOT 1
- ./node_modules/date-fns/startOfISOWeek.mjs Can't import the named export 'startOfWeek' from non EcmaScript module (only default export is available)
- ./node_modules/date-fns/startOfISOWeek.mjs HOT 1
- MonthYearPicker: Excluded Months are able to be navigated to with keyboard if there is no value selected HOT 1
- Make date range separator customizable
- dayClassName runs even on hover and loops on every date making the datepicker rendering slower.
- "renderYearContent" unavailable in proptypes HOT 1
- Error using time select HOT 6
- Error when installing dependencies
- Gap between arrow and the datepicker HOT 1
- Datepicker onChange event type Error when selectsRange prop is true
- SelectsMultiple with DateTime or TimeOnly
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-datepicker.