problem with date-fns #240

soroushm · 2018-03-03T22:39:40Z

Environment

Tech	Version
material-ui-pickers	material-ui-pickers@^1.0.0-rc.1
material-ui	material-ui@1.0.0-beta.21
React	react@15.6.1
date-fns	date-fns@1.29.0
Browser	any
Platform	osx

Steps to reproduce

Update date picker
get date-fns error
npm install date-fns
get error like this

./~/material-ui-pickers/utils/date-fns-utils.js
Module not found: Can't resolve 'date-fns/addDays'

date-fns have folder like add_days

Expected behavior

import parse from 'date-fns/parse';
import addDays from 'date-fns/add_days';
import addMonths from 'date-fns/add_months';
import addYears from 'date-fns/add_years';
import endOfDay from 'date-fns/end_of_day';
import endOfMonth from 'date-fns/end_of_month';
import endOfWeek from 'date-fns/end_of_week';
import endOfYear from 'date-fns/end_of_year';
import format from 'date-fns/format';
import isAfter from 'date-fns/is_after';
import isBefore from 'date-fns/is_before';
import isSameDay from 'date-fns/is_same_day';
import isValid from 'date-fns/is_valid';
import setDay from 'date-fns/set_day';
import setHours from 'date-fns/set_hours';
import setMinutes from 'date-fns/set_minutes';
import setYear from 'date-fns/set_year';
import startOfDay from 'date-fns/start_of_day';
import startOfMonth from 'date-fns/start_of_month';
import startOfWeek from 'date-fns/start_of_week';
import startOfYear from 'date-fns/start_of_year';
import getHours from 'date-fns/get_hours';
import getYear from 'date-fns/get_year';
import isEqual from 'date-fns/is_equal';

Actual behavior

import parse from 'date-fns/parse';
import addDays from 'date-fns/addDays';
import addMonths from 'date-fns/addMonths';
import addYears from 'date-fns/addYears';
import endOfDay from 'date-fns/endOfDay';
import endOfMonth from 'date-fns/endOfMonth';
import endOfWeek from 'date-fns/endOfWeek';
import endOfYear from 'date-fns/endOfYear';
import format from 'date-fns/format';
import isAfter from 'date-fns/isAfter';
import isBefore from 'date-fns/isBefore';
import isSameDay from 'date-fns/isSameDay';
import isValid from 'date-fns/isValid';
import setDay from 'date-fns/setDay';
import setHours from 'date-fns/setHours';
import setMinutes from 'date-fns/setMinutes';
import setYear from 'date-fns/setYear';
import startOfDay from 'date-fns/startOfDay';
import startOfMonth from 'date-fns/startOfMonth';
import startOfWeek from 'date-fns/startOfWeek';
import startOfYear from 'date-fns/startOfYear';
import getHours from 'date-fns/getHours';
import getYear from 'date-fns/getYear';
import isEqual from 'date-fns/isEqual';

and now get a new error

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `ModalWrapper`.
SignUp
src/components/person/SignUp.js:112
  109 | {/*leftArrowIcon={<KeyboardArrowLeft />}*/}
  110 | {/*rightArrowIcon={<KeyboardArrowRight />}*/}
  111 | 
> 112 | <DatePicker
  113 | 	keyboard
  114 | 	clearable
  115 | 	label="Choose a date"
View compiled
SignUp
src/components/person/SignUp.js:49
  46 | switch(step){
  47 | 	case 0:
  48 | 		return (
> 49 | 			<div>
  50 | 				<TextField
  51 | 					required
  52 | 					id="required"
View compiled
SignUp
src/components/person/SignUp.js:185
  182 | <Step key={label}>
  183 | 	<StepLabel>{label}</StepLabel>
  184 | 	<StepContent>
> 185 | 		<Typography>{getStepContent(index, classes, this.state, this.handleChange)}</Typography>
  186 | 		<div className={classes.actionsContainer}>
  187 | 			<div>
  188 | 				<Button
View compiled
SignUp
src/components/person/SignUp.js:182
  179 | <Stepper activeStep={activeStep} orientation="vertical">
  180 | 	{steps.map((label, index) => {
  181 | 		return (
> 182 | 			<Step key={label}>
  183 | 				<StepLabel>{label}</StepLabel>
  184 | 				<StepContent>
  185 | 					<Typography>{getStepContent(index, classes, this.state, this.handleChange)}</Typography>
View compiled
SignUp
src/components/person/SignUp.js:179
  176 |      justify="center">
  177 | <Grid item xs={12} sm={6} md={4}>
  178 | 	<Paper className={classes.paper}>
> 179 | 		<Stepper activeStep={activeStep} orientation="vertical">
  180 | 			{steps.map((label, index) => {
  181 | 				return (
  182 | 					<Step key={label}>
View compiled
SignUp
src/components/person/SignUp.js:172
  169 | 
  170 | return (
  171 | 	<div className={classes.container}>
> 172 | 		<Grid container
  173 | 		      className={classes.fullHeight}
  174 | 		      alignItems="center"
  175 | 		      direction="row"
View compiled
PP
src/components/common/Container.js:102
   99 | <section
  100 | 	className={classNames(classes.content, open && classes.contentShift)}
  101 | >
> 102 | 	<WrappedComponent {...this.props} {...newProps}/>
  103 | 	<AddCompanyDialog
  104 | 		open={this.state.AddCompany}
  105 | 		handleClose={() =>this.setState({AddCompany: false})}
View compiled
PP
src/components/common/Container.js:99
   96 | 		</List>
   97 | 	</div>
   98 | </Drawer>
>  99 | <section
  100 | 	className={classNames(classes.content, open && classes.contentShift)}
  101 | >
  102 | 	<WrappedComponent {...this.props} {...newProps}/>
View compiled
PP
src/components/common/Container.js:74
  71 | 
  72 | return (
  73 | 	<MuiThemeProvider theme={theme}>
> 74 | 		<div className={classes.appFrame}>
  75 | 			<Helmet htmlAttributes={this.htmlAttr()} bodyAttributes={{class: `page_${name}`}}/>
  76 | 			<Header {...this.props} title={name} open={open} drawer={this.handleDrawerToggle}/>
  77 | 			<Drawer
View compiled
Route
src/routes.js:28
  25 | 
  26 | renderSignUp = (props) =>{
  27 |     this.handleAuthentication(props);
> 28 |     return <SignUp {...props} />
  29 | }
  30 | 
  31 | setSession(authResult){
View compiled
CustomeRoutes
src/routes.js:77
  74 | <Route path="/entity/:entityname" component={Entity}/>
  75 | <Route path="/flow/:username" component={Flow}/>
  76 | <Route path="/skill/:id" component={Skill}/>
> 77 | <Route path="/signUp" render={this.renderSignUp}/>
  78 | <Route path="/error"
  79 |        render={() => <h1>Something went wrong! please try again later!</h1>}/>
  80 | <Route path="*" render={() => <h1>Not found</h1>}/>
View compiled
CustomeRoutes
src/routes.js:71
  68 | <MuiPickersUtilsProvider utils={MomentUtils}>
  69 |     <JssProvider jss={jss}>
  70 |         <Router>
> 71 |             <Switch>
  72 |                 <Route exact path="/" component={Landing}/>
  73 |                 <Route path="/person/:username" component={Personal}/>
  74 |                 <Route path="/entity/:entityname" component={Entity}/>
View compiled
CustomeRoutes
src/routes.js:68
  65 | <ApolloProvider client={client}>
  66 |     <Provider store={store}>
  67 |         <I18nextProvider i18n={ i18n }>
> 68 |             <MuiPickersUtilsProvider utils={MomentUtils}>
  69 |                 <JssProvider jss={jss}>
  70 |                     <Router>
  71 |                         <Switch>
View compiled
CustomeRoutes
src/routes.js:65
  62 | const jss = create({plugins: [...preset().plugins, rtl()]});
  63 | jss.options.createGenerateClassName = createGenerateClassName;
  64 | return (
> 65 |   <ApolloProvider client={client}>
  66 |       <Provider store={store}>
  67 |           <I18nextProvider i18n={ i18n }>
  68 |               <MuiPickersUtilsProvider utils={MomentUtils}>
View compiled
(anonymous function)
src/index.js:11
   8 | import CustomeRoutes from './routes';
   9 | 
  10 | render(
> 11 |   <CustomeRoutes />
  12 |   , document.getElementById('root')
  13 | );
  14 | registerServiceWorker();

The text was updated successfully, but these errors were encountered:

dmtrKovalenko · 2018-03-04T06:59:27Z

You need date fns 2.0
Install it like npm i date-fns@next

soroushm · 2018-03-04T21:50:20Z

@dmtrKovalenko Please add npm install date-fns@next -S in Documentation in Installation Section

andrew-w-ross · 2018-03-05T13:17:07Z

@dmtrKovalenko Why not add date-fns as a peer dependency? At least then yarn would complain.

dmtrKovalenko · 2018-03-05T13:28:16Z

@andrew-w-ross Because we have a dependency moment OR date-fns

soroushm · 2018-03-06T22:58:29Z

@dmtrKovalenko Thank you for added in docs

aeroxy · 2019-06-25T03:37:42Z

Still won't work:

import error: 'DateFnsUtils' is not exported from 'date-fns'.

Please add document about how to use date-fns with @material-ui/pickers

Also, since moment won't work with @material-ui/pickers, why not just add date-fns into the package itself.

pharingee · 2019-07-22T12:33:54Z

You need to install both date-fns@next and @date-io/date-fns to get it to work.

$ npm i --save date-fns@next @date-io/date-fns

dmtrKovalenko · 2019-07-31T05:51:45Z

@aeroxy I'll try to describe everything

You really need to install both @date-io/date-fns and date-fns@next
This library supports moment users. For moment you will need to install @date-io/moment and moment. Instead of date-fns respectively.
We are not adding the date-fns directly to the package in order to make possible to use moment, dayjs or luxon. But date-fns is recommended and primarily supported lib.

aeroxy · 2019-07-31T11:03:01Z

I see. But this is confusing. Why not just, again, add date-fns into the package itself. You can add another npm package called material-ui-pickers-pure or material-ui-pickers-bare without date-fns libs.

vonkanehoffen · 2019-08-20T12:37:53Z

Yeah I don't really get the thinking behind having the provider in general. Having to wrap everything in <MuiPickersUtilsProvider utils={DateFnsUtils}> makes no sense. Better to pull the required date-fns as a dependency of the component. Cleaner code and better DX.

armenr · 2019-09-02T12:13:22Z

We got bit by this. We lost considerable time trying to understand the what and the why of this.

My team and I are in full support of @aeroxy 's suggestion.

dmtrKovalenko · 2019-09-02T12:20:06Z

We will not get out of current solution at least for now
You need to wrap the component only 1 time. A lot of developers using moment (60%) but a lot of users don't want to.
This is the only solution for that

dmtrKovalenko closed this as completed Mar 4, 2018

mui locked and limited conversation to collaborators Sep 2, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

problem with date-fns #240

problem with date-fns #240

soroushm commented Mar 3, 2018

dmtrKovalenko commented Mar 4, 2018 •

edited

soroushm commented Mar 4, 2018

andrew-w-ross commented Mar 5, 2018

dmtrKovalenko commented Mar 5, 2018

soroushm commented Mar 6, 2018

aeroxy commented Jun 25, 2019

pharingee commented Jul 22, 2019

dmtrKovalenko commented Jul 31, 2019

aeroxy commented Jul 31, 2019

vonkanehoffen commented Aug 20, 2019

armenr commented Sep 2, 2019

dmtrKovalenko commented Sep 2, 2019

problem with date-fns #240

problem with date-fns #240

Comments

soroushm commented Mar 3, 2018

Environment

Steps to reproduce

Expected behavior

Actual behavior

dmtrKovalenko commented Mar 4, 2018 • edited

soroushm commented Mar 4, 2018

andrew-w-ross commented Mar 5, 2018

dmtrKovalenko commented Mar 5, 2018

soroushm commented Mar 6, 2018

aeroxy commented Jun 25, 2019

pharingee commented Jul 22, 2019

dmtrKovalenko commented Jul 31, 2019

aeroxy commented Jul 31, 2019

vonkanehoffen commented Aug 20, 2019

armenr commented Sep 2, 2019

dmtrKovalenko commented Sep 2, 2019

dmtrKovalenko commented Mar 4, 2018 •

edited