CSS class names no longer working with 20.3.0

react-dates version react-dates@20.3.0

Describe the bug A project that was working with 20.2.5 using react-dates/initialize to get old-school class names is no longer working after upgrading to 20.3.0. Appears to be this PR: https://github.com/airbnb/react-dates/pull/1758

Now getting the Cannot read property 'createLTR' of undefined like you got in the past if you didn’t use initialize.

Maybe this just needs documentation? Not sure what it meant by “css injected prop”

[ljharb]

It might be that webpack’s automatic bundle splitting isn’t consistently deduping both react-dates and react-with-styles?

[noratarano]

@mstanaland The “css injected prop” refers to the css prop that withStyles()(Component) injects into components it wraps from react-with-styles. This is the framework that’s used for styling all react-dates components. Internally withStyles looks something like this (simplified for brevity):

const { css, styles, theme} = withStylesProps();
return (
  <WrappedComponent
    {...this.props}
    {...{
      css,
      styles,
      theme,
    }}
  />
);

So there’s no need to import css directly, especially not from within react-dates components. This ensures that the css function used is the one that’s been registered through ThemedStyleSheet.registerInterface(), which in turn is what should be called by react-dates/initialize.

Update: ~I’m looking at that function right now and I’m not seeing any calls to ThemedStyleSheet.registerInterface(), which explains why you’re getting the error Cannot read property 'createLTR' of undefined, since createLTR is accessed from that object that is undefined.~ (I confused the theme with the interface). It’s definitely registering the CSSInterface.

What surprises me is that this error wasn’t happening before. Can you share the complete trace for that error?

cc @ljharb