New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Errors when upgrading to latest react-dates #769
Comments
Please read the docs - did you |
As @ljharb, the README includes instructions for setting up v13 properly! :) We introduced a breaking change that requires a tiny bit more set-up. |
I followed the instructions and am still getting the error... react: 16.0.0
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';
import React from 'react';
// ...
import { SingleDatePicker as DatePicker } from 'react-dates';
// ...
<DatePicker
date={dueDate}
focused={this.state.focused}
numberOfMonths={1}
onDateChange={this.handleDateChange}
onFocusChange={({ focused }) => this.setState({ focused })}
placeholder="Due Date (optional)"
/>
|
@icd2k3 Does the same thing happen if you do
? |
@majapw yea it is - just to be sure, I moved the imports directly into the top of What's strange too, is after upgrading I don't see a |
Hmm, this is really weird. I'll have to investigate... maybe it's something to do with React 16? The css folder is gone from the npm package because it no contains anything useful (it just contains some css for the storybook). The CSS file in lib is built from the components themselves. |
This one is no longer found and it was providing the main styles for the component I believe.
|
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. We did have to add an alias and import the initialize js to fix the issue @nooysters mentioned above 2 days ago though. |
Same issue here, just trying to make the component work on a simple, isolated page: const React = require('react');
require('react-dates/initialize');
require('react-dates/lib/css/_datepicker.css');
const {DateRangePicker} = require('react-dates');
module.exports = function Test () {
return (
<DateRangePicker onDatesChange={()=>{}}
onFocusChange={()=>{}}/>
);
} {
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"webpack": "^2.2.1"
},
"dependencies": {
"moment": "^2.17.1",
"react": "^15.4.2",
"react-addons-shallow-compare": "^15.6.2",
"react-dom": "^15.4.2",
"react-dates": "^13.0.4",
}
} Compilation error on webpack:
Effectively Removing the css dependency fixes the compilation error, but the component is rendered without styles as expected. Are we supposed to manually run |
Running the build script in the latest checkout of react-dates I can see that the css dir does get created successfully. I'm wondering if maybe there was just a blip of some sort during the publishing of this latest version and if another push would fix it. I am guessing the issue relies totally in a build artifact missing not a bug in the code or implementation problem. EDIT: or maybe this is the root cause: 804fb1d |
But that shouldn't affect... Also the css missing issue is different from the error presenting here on the theme. |
@majapw The title of the open issue is "errors when upgrading to latest react-dates", so I think thats why we found it appropriate to comment on the missing css in the latest react-dates here, not to mention they are related to the same set of changes. Would it help to open a separate issue specifically about the css? |
Okay I was... unfamiliar with the particular of npmignroe patterns. The missing css issue should be resolved in 13.0.5. As for
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! |
Indeed, importing any unbuilt files isn't part of our API, so removing it isn't a breaking change. |
The readme said this, before f3e731e:
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. |
Fair point @dorianWB. I will call it a patch for behavior that should have been removed in v13, especially since |
Thanks @majapw - 13.0.5 fixed the |
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 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 import 'react-dates/initialize'; per the README instructions. Workaround:_ By removing |
+1 to @erin-doyle - I too had |
@erin-doyle @icd2k3 is there any way you could add a snippet to the README to better describe your solution? |
@majapw well it fixes the error, but it's actually not a great solution. I would like to keep For example, 12.6.0 was only included in So, now that we know what the issue is, I'd like to look for a better solve which allows me to keep 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',
],
}, |
I agree with @icd2k3. So I've changed where I said "Solution" to instead say "Workaround". I wonder if the |
Hmm, we're still definitely working out the kinks of using RWS in the wild (so react-dates is def the playground for this process). One thing we do internally is that we have a
and then every individual component imports from this file instead of from
This ensures that the theme and interface is always set when you import a component, but unfortunately also marries the implementation to a particular interface and theme which is... less ideal. @lencioni do you have any thoughts on this thread? |
@icd2k3 @erin-doyle Could you post more of your webpack config? If I'm understanding this issue correctly, you're seeing that errors are happening when you pull |
Here's a scaled down example of what we're doing: const allEntries = {
// add the main entry for our app
main: ['babel-polyfill', jsPath],
// tack on a seperate entry for major dependencies
vendor: [
'axios',
'classnames',
'immutable',
'moment',
'moment-timezone',
'react',
'react-a11y-utils',
// 'react-dates', // <==== I had to remove this here
'react-dom',
'react-immutable-proptypes',
'react-intl',
'react-intl-redux',
'react-redux',
'react-router',
'react-router-redux',
'redux',
'redux-form',
'redux-immutable',
'redux-localstorage',
'redux-localstorage-immutable',
'redux-offline',
'redux-saga',
'reselect'
]
};
const config = {
resolve: { // put options affecting module resolution in here
modules: [path.resolve(src), 'node_modules'] // absolute path for dir containing all of the app's modules
},
entry: allEntries,
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'extra', 'manifest'],
minChunks: 3
})
]
}; |
I too am seeing this behavior if I just npm install --save it out of the box. Hoping for a fix soon! |
@DaveCole is it due to your webpack config? are you importing the initialize script as per the readme? |
@DaveCole you shouldn't see the @gdborton I could post more of my webpack config, but it's really similar to @erin-doyle's |
What is the status on this? I'm seeing the same errors even though I am importing initialize before using any of the components. |
The ones in the initial post on this issue. I'm not sure I understand. Both this and #811 unresolved so why is my comment not relevant here? |
@janpe are you using entry code chunk splitting in webpack? |
Maybe the question is, should we either:
Or 1 and then 2? |
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 |
After a new deployment today I am seeing this error in the console.
It appears this error has persisted for a while, and there has been no solution offered. What is odd, is that we were not experiencing this issue previously. I'm assuming one of these releases has caused the issue to re-surface:
We are using webpack and the CommonChunksPlugin to put Please advise. |
I think the advice is still the same as it is earlier on in this thread:
|
FYI, pinning |
I think this has been addressed; pinning to v15 isn't a long term solution, and the solutions with v16 have been discussed in this thread already. If anyone is still having problems, please file a new issue :-) |
upgrading from 12.1.0 to 13.0.3
After installing the new module running into these errors, I think its something to do w/ storybook?
and
and
Wondering if anyone else ran into these, and if there is a fix for them. Thanks in advanced!
The text was updated successfully, but these errors were encountered: