react-datepicker: WebpackError: ReferenceError: window is not defined

I am having irritative behaviour with my gatsby build. I can successfully run the development build using npm start but when I use to run it in production mode using gatsby build I am getting below error

error Building static HTML failed for path "/application/"

See our docs page on debugging HTML builds for help https://gatsby.app/debug-html

  6097 | 
  6098 | function getLocaleObject(localeName) {
> 6099 |   return window.__localeData__ ? window.__localeData__[localeName] : null;
       | ^
  6100 | }
  6101 | 
  6102 | function getFormattedWeekdayInLocale(date, formatFunc, locale) {


  WebpackError: ReferenceError: window is not defined
  
  - index.js:6099 getLocaleObject
    [lib]/[react-datepicker]/es/index.js:6099:1
  
  - index.js:5973 formatDate
    [lib]/[react-datepicker]/es/index.js:5973:1
  
  - index.js:5990 safeDateFormat
    [lib]/[react-datepicker]/es/index.js:5990:1
  
  - index.js:8822 DatePicker._this.renderDateInput
    [lib]/[react-datepicker]/es/index.js:8822:1
  
  - index.js:8900 DatePicker.render
    [lib]/[react-datepicker]/es/index.js:8900:1
  
  - bootstrap:19 c
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:25 a.render
    lib/webpack/bootstrap:25:1
  
  - bootstrap:24 a.read
    lib/webpack/bootstrap:24:1
  
  - bootstrap:36 renderToString
    lib/webpack/bootstrap:36:1
  
  - static-entry.js:194 Module../.cache/static-entry.js.__webpack_exports__.defa    ult
    lib/.cache/static-entry.js:194:18
  
  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1
  
  
  - gatsby-browser-entry.js:2 Promise._resolveFromExecutor
    lib/.cache/gatsby-browser-entry.js:2:1
  
  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1

Can someone please help why I am getting this error. Thank you!!!

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 21

Most upvoted comments

Well I have found a solution.

Go to node_modules/react-datepicker/es/index.js and define the window variable

var window = require('window')

+13

ashishlal91 on Feb 11, 2019

No I think it would be a dirty fix, the root cause should be fixed. I think the problem here, is that it’s behaving in a different way than date-fns.

The date-fns library does not have any global configuration, it lets the user handle a configuration object. react-datepicker keeps a global configuration object whereas it should provide a similar way to configure it than date-fns. By doing it this way, it would remove the need for any global window usage.

Could there be a way to do it this way?

julien1619 on May 13, 2019

There is a PR waiting to be merged that will fix this bug : #1634

julien1619 on Feb 19, 2019

Something like this for Browserify and Webpack:

<Datepicker selected={process.browser && this.props.date} />

Krknv on Feb 23, 2019

I’ve succeeded to make it work but the translations won’t work in SSR.

To do it here is what I’ve done:

const isSSR = typeof window === 'undefined';
if (!isSSR) {
  registerLocale('fr', fr);
  setDefaultLocale('fr');
}

// In the render function
<DatePicker
  selected={filter.dateStart}
  onChange={this.handleDateStartChange}
  locale={isSSR ? 'en' : 'fr'}
/>

julien1619 on Feb 10, 2019