CSS class names no longer working with 20.3.0

[mstanaland]

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: #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"

[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

[mstanaland]

@noratarano Sorry for the delay getting back to you, and thanks for the explanation - I think I follow now.

A little more investigation on my part has me thinking the issue is likely at least partly our setup. We have react-dates in a component library that's used by multiple microservices. The 20.3.0 update seems to work fine in the component library itself; it's the microservices that are crashing.

So maybe you can just close this issue, but I'm still scratching my head as to what the issue is though, since everything was A-OK with 20.2.5.

Here's the error as Chrome spits it out

Uncaught TypeError: Cannot read property 'createLTR' of undefined
    at Object.createLTR (webpack-internal:///../sarsaparilla/node_modules/react-with-styles/lib/ThemedStyleSheet.js:23)
    at getStyleDef (webpack-internal:///../sarsaparilla/node_modules/react-with-styles/lib/withStyles.js:129)
    at getState (webpack-internal:///../sarsaparilla/node_modules/react-with-styles/lib/withStyles.js:147)
    at new WithStyles (webpack-internal:///../sarsaparilla/node_modules/react-with-styles/lib/withStyles.js:168)
    at new withStyles(DateRangePicker) (eval at <anonymous> (webpack-internal:///./node_modules/react-hot-loader/dist/react-hot-loader.development.js), <anonymous>:5:7)
    at constructClassInstance (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:11864)
    at updateClassComponent (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:13681)
    at beginWork (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:14489)
    at performUnitOfWork (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:17014)
    at workLoop (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:17054)
    at HTMLUnknownElement.callCallback (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:149)
    at HTMLUnknownElement.wrapped (webpack-internal:///./node_modules/raven-js/src/raven.js:377)
    at Object.invokeGuardedCallbackDev (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:199)
    at invokeGuardedCallback (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:256)
    at replayUnitOfWork (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:16366)
    at renderRoot (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:17148)
    at performWorkOnRoot (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:17993)
    at performWork (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:17901)
    at performSyncWork (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:17873)
    at requestWork (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:17761)
    at scheduleWork (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:17566)
    at Object.enqueueSetState (webpack-internal:///../sarsaparilla/node_modules/react-dom/cjs/react-dom.development.js:11695)
    at ProxyComponent.Component.setState (webpack-internal:///../sarsaparilla/node_modules/react/cjs/react.development.js:373)
    at ProxyComponent.onStateChange (webpack-internal:///../sarsaparilla/node_modules/react-redux/es/components/connectAdvanced.js:221)
    at ProxyComponent.onStateChange (webpack-internal:///./node_modules/react-hot-loader/dist/react-hot-loader.development.js:580)
    at Object.dispatch (webpack-internal:///../sarsaparilla/node_modules/redux/es/redux.js:222)
    at e (<anonymous>:1:40553)
    at eval (webpack-internal:///../sarsaparilla/node_modules/react-router-redux/lib/middleware.js:22)
    at eval (webpack-internal:///../sarsaparilla/node_modules/redux-thunk/es/index.js:12)
    at dispatch (webpack-internal:///../sarsaparilla/node_modules/redux/es/redux.js:619)
    at eval (webpack-internal:///./ui-camping/src/shared/actions/campground.js:53)
webpack-internal:///./node_modules/raven-js/src/console.js:35 The above error occurred in the <withStyles(DateRangePicker)> component:
    in withStyles(DateRangePicker) (at DateRangePickerWithKey.jsx:65)
    in DateRangePickerWithKey (at CampgroundCalendar.jsx:366)
    in div (at CampgroundCalendar.jsx:369)
    in CampgroundCalendar (created by Connect(CampgroundCalendar))
    in Connect(CampgroundCalendar) (at availability/index.jsx:216)
    in div (at availability/index.jsx:215)
    in div (at availability/index.jsx:209)
    in section (at availability/index.jsx:208)
    in Availability (at campground-page/index.jsx:537)
    in div (at campground-page/index.jsx:719)
    in div (at FlexCol.jsx:275)
    in FlexCol (at campground-page/index.jsx:718)
    in div (at FlexRow.jsx:37)
    in FlexRow (at campground-page/index.jsx:680)
    in div (at campground-page/index.jsx:679)
    in div (at campground-page/index.jsx:678)
    in div (at campground-page/index.jsx:670)
    in CampgroundPage (created by Connect(CampgroundPage))
    in Connect(CampgroundPage) (at routes.js:58)
    in component (created by RouterContext)
    in div (at FocusManager.jsx:226)
    in FocusManager (created by withRouter(FocusManager))
    in withRouter(FocusManager) (at App.js:100)
    in div (at SkipNavContent.jsx:6)
    in SkipNavContent (at App.js:99)
    in div (at App.js:96)
    in div (at App.js:95)
    in div (at App.js:94)
    in App (created by Connect(App))
    in Connect(App) (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider (at dev/index.jsx:32)

[ljharb]

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

[reZach]

I'm confirming there is still an issue in version 21.5.1. Following the install instructions results in a TypeError: Cannot read property 'createLTR' of undefined error in the console. I do not have react-with-styles installed so I don't think this is the problem.

[ljharb]

@reZach see https://github.com/airbnb/react-dates#initialize