ReferenceError: window is not defined

[novenix]

Expected behavior

it suppose to render ther calendar in server side, but when i save appear this error

Actual behavior

Client pings, but there's no entry for page: /_error
ReferenceError: window is not defined
at getLocaleObject (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-datepicker\lib\index.js:6099:3)
at formatDate (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-datepicker\lib\index.js:5979:19)
at safeDateFormat (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-datepicker\lib\index.js:5996:18)
at DatePicker._this.renderDateInput (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-datepicker\lib\index.js:8806:154)
at DatePicker.render (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-datepicker\lib\index.js:8881:14)
at processChild (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-dom\cjs\react-dom-server.node.development.js:2863:18)
at resolve (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-dom\cjs\react-dom-server.node.development.js:2716:5)
at ReactDOMServerRenderer.render (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-dom\cjs\react-dom-server.node.development.js:3100:22)
at ReactDOMServerRenderer.read (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-dom\cjs\react-dom-server.node.development.js:3059:29)
at renderToString (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-dom\cjs\react-dom-server.node.development.js:3526:27)
at renderPage (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\next\dist\server\render.js:319:26)
at Function.getInitialProps (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\next\dist\server\document.js:65:25)
at _callee$ (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\next\dist\lib\utils.js:86:30)
at tryCatch (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\regenerator-runtime\runtime.js:62:40)
at Generator.invoke [as _invoke] (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\regenerator-runtime\runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\regenerator-runtime\runtime.js:114:21)
Client pings, but there's no entry for page: /_error
ReferenceError: window is not defined
at getLocaleObject (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-datepicker\lib\index.js:6099:3)
at formatDate (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-datepicker\lib\index.js:5979:19)
at safeDateFormat (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-datepicker\lib\index.js:5996:18)
at DatePicker._this.renderDateInput (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-datepicker\lib\index.js:8806:154)
at DatePicker.render (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-datepicker\lib\index.js:8881:14)
at processChild (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-dom\cjs\react-dom-server.node.development.js:2863:18)
at resolve (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-dom\cjs\react-dom-server.node.development.js:2716:5)
at ReactDOMServerRenderer.render (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-dom\cjs\react-dom-server.node.development.js:3100:22)
at ReactDOMServerRenderer.read (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-dom\cjs\react-dom-server.node.development.js:3059:29)
at renderToString (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\react-dom\cjs\react-dom-server.node.development.js:3526:27)
at renderPage (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\next\dist\server\render.js:319:26)
at Function.getInitialProps (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\next\dist\server\document.js:65:25)
at _callee$ (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\next\dist\lib\utils.js:86:30)
at tryCatch (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\regenerator-runtime\runtime.js:62:40)
at Generator.invoke [as _invoke] (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\regenerator-runtime\runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (C:\Users\user\Desktop\proyectos\portfolio-nicolas\node_modules\regenerator-runtime\runtime.js:114:21)

Disposing inactive page(s): /callback

Steps to reproduce

i have a JS file with that code
import React from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

class PortDate extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: new Date()
};
this.handleChange = this.handleChange.bind(this);
}

handleChange(date) {
this.setState({
startDate: date
});
}

render() {
return (

);
}
}
export default PortDate;

---

and have anotherone where im importing

import PortInput from '../form/portInput';

const validateInputs=(values)=>{
let errors = {};
// debugger;

Object.entries(values).forEach(([key,value])=>{
    if(!values[key]){
        errors[key]=`El campo ${key} es requerido`
    }
    
})

return errors;

}
const INITIAL_VALUES={
startDate:'',
endDate:''
}
const PortfolioCreateForm = () => (

<Formik
  initialValues={INITIAL_VALUES}
  validate={validateInputs}
  onSubmit={(values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 400);
  }}
>
  {({ isSubmitting }) => (
    <Form>
        <Field  type="textarea" 
                name="startDate"
                label='Start Date'
                component={PortDate}/>

        <Field type="textarea" 
                name="endDate"
                label='End Date'
                component={PortDate}/>

      <button type="submit" disabled={isSubmitting}>
        Create
      </button>
    </Form>
  )}
</Formik>

);

export default PortfolioCreateForm;

[novenix]

in the part of Field (imported from 'formik') still not working without the type='textarea' label

[andresg747]

+1

[jony89]

This bug caused by the following commit :
f0d4c56#diff-eae406df76db9079672d27cd79e9079eR114

A call to formatDate was added which in turn calling to getLocaleObject that is looking for a window object, thus failing on server side.

@Darrken

[pedro-pedrosa]

Also getting an error here. registerLocale stores locale data in the window object.

Why do we have to register locales in the first place? Registering a default locale probably makes sense, but registering other locales and then referring to them by name is a bit strange if you ask me. Why not just pass the locale data to the component?

[abobykin]

Guys, @novenix @andresg747 @jony89 @pedro-pedrosa How do you think, is there any possibility to make this datepicker work on SSR configuration?
If Yes - how?
If NO or you stop trying and make other decision - could you please advise - what other solution have you found?

Thanks in advance!

[pedro-pedrosa]

I have stopped using locales on datepickers.

In theory I guess you could disable them only on SSR, when client code picks up it will update to the desired locale.

If you don't want to do that, maybe you can create a global mock window object for this purpose.

[abobykin]

Hey, thanks for fast feedback Pedro!

Could you please show me the example of how use stop 'locales on datepickers' or the a little bit more detailed explanation that other variant maybe with mock object (I'm a little bit like stuck but deadline is too close) ?

It brakes for me on a selected attribute

when I removing it -> error goes away but nothing's switching in datepicker of course )

Thank you very much in advance, man!

[abobykin]

@pedro-pedrosa Forgot you name tag in the post above) Looking forward to discuss if you have time of course.

[pedro-pedrosa]

To me this wasn't working because I was using locales on the datepicker. If you are not using locales then it's a different issue. Are you sure you're getting the window is not defined error?.

[abobykin]

With this selected={this.state.startDate} - Yes this doesn't work for my project, "just from the box".

But I've just made the switching dates with the way which is quite enough for me for now through onSelect={this.handleSelect} and binding the result in this function through the state object to the other visible input ) !

But now the other one strange thing... , YEARS seems not working for me, I mean they are not switching independently, any datepicker should have this option) for faster select date of birth (Of course if the user is not too young)))) )

I've found and wrote such attribute for this, but the header of it just gone)

        renderCustomHeader={({
          date,
          changeYear,
          changeMonth,
          decreaseMonth,
          increaseMonth,
          prevMonthButtonDisabled,
          nextMonthButtonDisabled
        }) => {}}

Maybe you made it work of course somehow for this datepicker? (who knows)

[abobykin]

I've found 'showYearDropdown' attribute it works for me! thank you anyway bro @pedro-pedrosa

[macrozone]

I've found 'showYearDropdown' attribute it works for me! thank you anyway bro @pedro-pedrosa

can you elaborate? how did this fix your ssr issue?

[litrs]

This versions is working!!!
"react-datepicker": "^1.8.0",

[HommeSauvage]

The problem still persists; I'm using ^2.2.0. The picker doesn't show up, just the input, so I tried using "inline" to investigate and as soon as I add that prop, I get the following error:

window is not defined

ReferenceError: window is not defined
    at getLocaleObject (/path/to/project/node_modules/react-datepicker/lib/index.js:6116:5)
    at getStartOfWeek (/path/to/project/node_modules/react-datepicker/lib/index.js:6040:28)
    at Calendar._this.header (/path/to/project/node_modules/react-datepicker/lib/index.js:7886:25)
    at Calendar._this.renderDefaultHeader (/path/to/project/node_modules/react-datepicker/lib/index.js:8092:17)
    at Calendar._this.renderMonths (/path/to/project/node_modules/react-datepicker/lib/index.js:8150:109)
    at Calendar.render (/path/to/project/node_modules/react-datepicker/lib/index.js:8268:12)
    at processChild (/path/to/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2942:18)
    at resolve (/path/to/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2795:5)
    at ReactDOMServerRenderer.render (/path/to/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3185:22)
    at ReactDOMServerRenderer.read (/path/to/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3144:29)
    at renderToString (/path/to/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3629:27)
    at render (/path/to/project/node_modules/next-server/dist/server/render.js:42:16)
    at renderPage (/path/to/project/node_modules/next-server/dist/server/render.js:102:16)
    at Function.getInitialProps (/path/to/project/cars/.next/server/static/development/pages/_document.js:1139:25)
    at _callee$ (/path/to/project/cars/.next/server/static/development/pages/_document.js:2477:77)
    at tryCatch (/path/to/project/node_modules/regenerator-runtime/runtime.js:62:40)

I'm using NextJS 8 for server side rendering

[levadadenys]

Facing the same issue.
Since there's no any other solution - here's my workaround.

{ process.browser && <Datepicker {...props} /> }

[jony89]

Facing the same issue.
Since there's no any other solution - here's my workaround.

{ process.browser && <Datepicker {...props} /> }

This will cause a diff between server and client rendering.

[HommeSauvage]

I just submitted a pull request to fix it here #1666

You can use that while it’s being reviewed.

[babul101]

Facing the same issue !!!!
It's working fine with version 1.8.0
but it gives an error while installing the latest version 2.2.0
Reference Error: Window is not defined

[Sushindhran]

Facing the same issue. Removing moment is a big deal, but no SSR :(

Any updates on the fix for this?

[oleksiimaslov]

fixed it by using dynamic import. Create fake component and use dynamic import in componentDidMount.

[dangvanduc90]

This versions is working!!!
"react-datepicker": "^1.8.0",

work like a charm

[davijose40]

I had the issue, and change to version:
"react-datepicker": "^1.8.0",
works fine, tks every one, i check my code one hundred times, now is working.

[smithaitufe]

The library is great but the documentation is poor.
Please can someone help me to figure out how to render custom header?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.