react-datepicker: ReferenceError: window is not defined

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 ( <DatePicker selected={this.state.startDate} onChange={this.handleChange} /> ); } } 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 = () => (

<div>

<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>

</div> );

export default PortfolioCreateForm;