React-dates: Theme causes TypeError 'DateRangePicker' of undefined

[AhmedAbdulrahman]

I'm trying to apply a custom theme:

import 'react-dates/initialize'
import React from 'react'
import { DateRangePicker } from 'react-dates'
import 'react-dates/lib/css/_datepicker.css'

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
import aphroditeInterface from 'react-with-styles-interface-aphrodite'

import Theme from './date-theme'

ThemedStyleSheet.registerInterface(aphroditeInterface)
ThemedStyleSheet.registerTheme(Theme)

It's causes an error:
1- TypeError: Cannot read property 'DateRangePicker' of undefined
2- Warning: Failed prop type: The prop styles is marked as required in DateRangePicker, but its value is undefined

In the Readme file also mention this:
Note that you must register an interface if you manually register a theme, But there is no explanation how can we register an interface a bit confusing !! Is there any other simple way to style the Calendar?

Thanks

[ljharb]

The explanation you're looking for is here

[majapw]

@AhmedAbdulrahman feedback def welcome!

You seem to be both using the initialize script and registering your own theme which doesn't quite work. If you remove the initialize script/css and change the order of operations to be:

import React from 'react'
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
import aphroditeInterface from 'react-with-styles-interface-aphrodite'

import Theme from './date-theme'

ThemedStyleSheet.registerInterface(aphroditeInterface)
ThemedStyleSheet.registerTheme(Theme)

import { DateRangePicker } from 'react-dates'

Does that work?

[AhmedAbdulrahman]

Thanks a lot for reply, I tired both way did't work and this time I get this error
TypeError: Cannot read property 'create' of undefined

[jnatherley]

@AhmedAbdulrahman It could be because you're importing the DateRangePicker before using the and registering the theme. I had a similar issue just now.

[silvenon]

Yeah, import order isn't guaranteed, which might be a problem in this case. My _webpack_ workaround for all problems like this is to add required modules to entry, for example:

module.exports = {
  entry: [
    'react-dates/initialize',
    'react-dates/lib/css/_datepicker.css',
    './src'
  ]
}

Apart from the guaranteed order, another reason why this is a good place for these is because importing them every time you need react-dates is repetitive. By placing them here you satisfy this requirement in one place.

[ljharb]

Import ordering is definitely guaranteed within a specific module graph.

[silvenon]

I was referring to the initial code example, AFAIK react-dates/initialize isn't guaranteed to be imported before react-dates just because it's specified that way.

[ljharb]

Yes, it is, unless something earlier in the graph imports react-dates first.

[silvenon]

TIL 😅

[monotv]

Exactly the same issue here (not Storyboard):

Warning: Failed prop type: The prop `styles` is marked as required in `DateRangePicker`, but its value is `undefined`.
    in DateRangePicker
Cannot read property 'DateRangePicker' of undefined

react-dates setup:

import 'react-dates/initialize';
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
ThemedStyleSheet.registerInterface(aphroditeInterface);
ThemedStyleSheet.registerTheme(DefaultTheme);

Deps:

"react": "^16.2.0",
"react-dates": "^16.3.0"

So pretty much default out of the box and not working with Aphrodite interface. Invested quite some time into customizing the style now, at this point my best bet is probably to change the style in the node_modules folder :D

[majapw]

@monotv can you remove the initialize script from your set-up? That also registers a theme and interface (and notably a different one) so it will probably mess with the set-up. :)

[monotv]

@majapw of course, even though I have been down that road before. This happens:

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
ThemedStyleSheet.registerInterface(aphroditeInterface);
ThemedStyleSheet.registerTheme(DefaultTheme);
import { DateRangePicker } from 'react-dates';

Error:

TypeError: Cannot read property 'theme' of undefined
at Object.create (/some/directories/node_modules/react-with-styles/lib/ThemedStyleSheet.js:35:25)
...

I mean using CSS interface and overwriting the styles works fine but I wanted to use the Aphrodite way that you guys at Airbnb use too.

[majapw]

I wonder if the DateRangePicker import is being hoisted above the registration. If you move the two registration calls into their own file and import that above the react-dates import, does that help?

[monotv]

@majapw thanks, good call, I did this:
InitThemeWithAphrodite.js:

import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';

ThemedStyleSheet.registerInterface(aphroditeInterface);
ThemedStyleSheet.registerTheme(DefaultTheme);

index.js:

import './InitThemeWithAphrodite';
import { DateRangePicker } from 'react-dates';

Error:

Cannot automatically buffer without a document

This error is caused by server side rendering by Next.js:
https://github.com/Khan/aphrodite/issues/23

This leads into the rabbit hole of setting up my existing code base to work with server side rendering of Aphrodite styles. If other people encounter the same problems as me this is what you have to do:
https://github.com/Khan/aphrodite#server-side-rendering

The instructions are not applicable 1:1 in my case though so I will go with the CSS interface now because it already works.