React-dates: Warning.js errors when attempting to integrate into Preact app

[maddoxnelson]

👋 Hi, fairly new to React and Preact here.

I'm loving react-dates, but I need to integrate it into a Preact app. I have it working, but it keeps throwing warning errors in my test app. The errors only appear in dev mode, and the datepicker functions perfectly otherwise. When I run yarn build, the errors vanish (which I'd expect, but just clarifying).

I made a Git repo that's an accurate representation of my implementation, if anyone would like to spin it up for themselves and debug:
https://github.com/maddoxnelson/my-preact-dates-project

The errors specifically are:
Warning: Failed prop type: WithStyles: unknown props found: children
Warning: Failed prop type: DateRangePicker: unknown props found: children
Warning: Failed prop type: DateRangePickerInputController: unknown props found: children Warning: Failed prop type: DateRangePickerInput: unknown props found: children
Warning: Failed prop type: DateInput: unknown props found: children

I thought maybe this meant I needed to do some sort of preact-compat-ing, but I can't seem to get that right, either.

Feel free to chase me out or direct me to a better place to ask questions, if I'm breaking any rules by submitting here.

[ljharb]

We don't support preact since this is "react"-dates :-)

I'm not sure what the issues are here; I suspect that it's some difference in the way react and preact pass props to components, and validate propTypes. Probably a better place to file it is preact itself?

If it turns out there's a change we could make here, that wouldn't interfere with react usage but would enable preact usage, we'd be happy to make it!

[maddoxnelson]

If it turns out there's a change we could make here, that wouldn't interfere with react usage but would enable preact usage, we'd be happy to make it!

That's the gist of my question -- I'm surprised no one has tried to use this module with preact thus far, seems like it would be useful to be compatible with.

I'll keep poking around on my little test app. If I find a reasonable change, I'll file a PR -- open to suggestions from anyone else. Thanks for the info!

[damianobarbati]

@maddoxnelson I'm trying as well, did you find solution?

I have:

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

Which results with preact in:

Uncaught TypeError: Cannot read property '__direction__' of undefined
    at new WithStyles (withStyles.js?4c6e:166)

Works fine with react.

[maddoxnelson]

@damianobarbati I honestly don't remember... I think what finally happened is I fought with it, and finally just lived with the errors I described above.

I don't remember seeing a __direction__ error that broke things full stop... maybe introduced in a new version of react-dates?

I dunno if this helps, but amp-date-picker is also a wrapper around react-dates, I believe: https://amp.dev/documentation/components/amp-date-picker Maybe they have a solution.

[ljharb]

That’s react-with-direction which reads off of context. Does preact have context?

[heymartinadams]

@maddoxnelson @damianobarbati have you been able to find a solution, by any chance? Running into exactly the same issue myself using preact:

Cannot read property '__direction__'  at new WithStyles (withStyles.js?2099:176)

package.json

{
  "preact": "^10.0.0-rc.1",
  "react-dates": "^20.3.0",
}

@ljharb noticed your comment on context. Might you know if this package would address it? If so, how?

Any pointers greatly appreciated, thank you ✨

[heymartinadams]

Removing direction and replacing direction with defaultDirection, but in my node_modules/react-with-styles/lib/withStyles.js folder does the trick for now.

Of course it’s a terrible solution 😄 but for right now, it works.