react-dates: Errors when upgrading to latest react-dates

Please read the docs - did you import 'react-dates/initialize' at the top of your app?

I think 1 and then 2 seems like the right call. I’m not super familiar with webpack and my bandwidth is def… very overwhelmed right now, but I can try and sit down with folks here to see what we can do to address this (when I get back from PTO in two weeks).

This is what it shows up on the screen

Edit: I switched to this nice npm package: https://reactdatepicker.com

This one is no longer found and it was providing the main styles for the component I believe. import '!style-loader!css-loader!react-dates/lib/css/_datepicker.css'

import 'react-dates/initialize' fixes the Uncaught TypeError: Cannot read property 'theme' of undefined but not the

ERROR in ./node_modules/playa-styleguide/src/components/DatePicker/DatePicker.js
Module not found: Error: Can't resolve 'react-dates/lib/css/_datepicker.css' in '/Users/jeremyazzari/Workspace/h1/hyfn8_front_end_app/node_modules/playa-styleguide/src/components/DatePicker'

Yep 13.0.5 is good for me too, back to the theme error! In debugging our app I can tell so far it that create() in ThemedStyleSheet is getting called before registerTheme() gets called.

Because we have webpack splitting our bundle into a main (our code) bundle and a vendor (3rd party libs) bundle it seems as if there is some kind of initializing of the modules in the vendor bundle that takes place before our index.js is run in the main bundle. So I have this for a stacktrace:

create | @ | ThemedStyleSheet.js?0e9a:32
-- | -- | --
  | withStyles | @ | withStyles.js?5fe2:77
  | 65 | @ | DateInput.js?5beb:432
  | __webpack_require__ | @ | DateInput.js?5beb:13
  | (anonymous) | @ | DateInput.js?5beb:38
  | (anonymous) | @ | DateInput.js?5beb:40
  | (anonymous) | @ | vendor.9b8fb67….js:2667
  | __webpack_require__ | @ | manifest.9b8fb67….js:711

And this happens before my breakpoint in ThemedStyleSheet registerTheme() is hit which gets run at the beginning of my index.js

import 'react-dates/initialize';

per the README instructions.

Workaround:_ By removing react-dates from our vendor bundle I am now no longer receiving the error.

The readme said this, before https://github.com/airbnb/react-dates/commit/f3e731e252d383de66cae25b31a06782711594ac:

react-dates comes with a set of SCSS variables that can be overridden to add your own project-specific theming. Override any variables found in css/variables.scss with your own and then import ~react-dates/css/styles.scss (and ~react-dates/css/variables.scss if you’re only overriding a few).

so that’s what we did.

@ljharb Call it what you want, but the component stopped working properly after this release because we followed those instructions.

@majapw I admit our use case is far from normal, but I don’t know far it is from recommended given that following these instructions were enough to keep it working.

@majapw well it fixes the error, but it’s actually not a great solution.

I would like to keep react-dates in my webpack common entry chunk because my project utilizes a lot of code splitting. Because react-dates is used in a lot of places in my app this adds a lot of file size because it is now included in every code-split chunk that uses it.

For example, 12.6.0 was only included in common.js, whereas now in order to use 13.x the same react-dates source code will be included in homepage.js, reports.js, etc.js. This adds a lot to the overall loading time as the user clicks around the app.

So, now that we know what the issue is, I’d like to look for a better solve which allows me to keep react-dates in my separate entry chunk.

EDIT: here is my entry config for webpack for clairity

  entry: {
    app: IS_LOCAL
      ? ['react-hot-loader/patch', ENTRY]
      : ENTRY,
    common: [
      'asn1.js',
      'browserify-aes',
      'draft-js-mention-plugin',
      'draft-js-emoji-plugin',
      'draft-js-plugins-editor',
      'elliptic',
      'react-addons-css-transition-group',
      'react-redux',
      'readable-stream',
      'react-dates',  // <---- this causes the theme error
      'linkify-it',
      'tlds',
      'victory',
      'victory-core',
      'victory-chart',
    ],
  },

Fair point @dorianWB. I will call it a patch for behavior that should have been removed in v13, especially since variables.scss didn’t work anymore so there was no option to override. 😬

Okay I was… unfamiliar with the particular of npmignroe patterns. The missing css issue should be resolved in 13.0.5.

As for

804fb1d was a breaking change I believe and I guess is related to the breaking change that was supposed to go out in 13.0.0 because we had 13.0.3 working with the old style imports until today.

I don’t believe we ever recommended importing the prebuilt CSS files, and if so, we def did not support it as of v13 so I think it’s a bit of a ??? as to whether to consider it breaking or not. 😕

In either case, I am still unsure as to why the missing theme error is still there. Will continue digging on that!