React-dates: Warning: Failed prop type: CalendarWeek: invalid value TypeError: CalendarWeek

[easwee]

I'm getting this warning message in console the first time SingleDatePicker opens:

Warning: Failed prop type: CalendarWeek: invalid value TypeError: CalendarWeek: invalid value supplied to 0.,TypeError: `CalendarWeek` only accepts children of type withStyles(CalendarDay),TypeError: `CalendarWeek` only accepts children of type withStyles(CustomizableCalendarDay) supplied to required children.
    in CalendarWeek (created by CalendarMonth)
    in CalendarMonth (created by withStyles(CalendarMonth))
    in withStyles(CalendarMonth) (created by CalendarMonthGrid)
    in div (created by CalendarMonthGrid)
    in div (created by CalendarMonthGrid)
    in CalendarMonthGrid (created by withStyles(CalendarMonthGrid))
    in withStyles(CalendarMonthGrid) (created by DayPicker)
    in div (created by DayPicker)
    in div (created by DayPicker)
    in div (created by OutsideClickHandler)
    in OutsideClickHandler (created by DayPicker)
    in div (created by DayPicker)
    in DayPicker (created by withStyles(DayPicker))
    in withStyles(DayPicker) (created by DayPickerSingleDateController)
    in DayPickerSingleDateController (created by SingleDatePicker)
    in div (created by SingleDatePicker)
    in div (created by OutsideClickHandler)
    in OutsideClickHandler (created by SingleDatePicker)
    in div (created by SingleDatePicker)
    in SingleDatePicker (created by withStyles(SingleDatePicker))
    ...

Version:

"react-dates": "^16.0.2",

Same behaviour happens with DateRangePicker. Possible bug?

[majapw]

Are you seeing this in the storybook as well? Can you share your call the the SingleDatePicker?

[easwee]

@majapw Yes.

      <SingleDatePicker
        anchorDirection='right'
        date={ startDate ? moment(startDate) : null }
        daySize={ 33 }
        focused={ focused }
        onDateChange={ this.handleUpdateInput }
        onFocusChange={ this.onFocusChange }
        placeholder={ '' }
        verticalSpacing={ 10 } />

Date value is irrelevant - either null or with date same warning. focused is just a boolean. I can't seem to replicate this on storybook, now that I checked. Kinda lost here :)

[majapw]

And just to follow up once more, what version of react-dates are you on?

@ljharb does that proptype error look a bit weird to you?

[easwee]

@majapw like I wrote - v 16.0.2

[ljharb]

The error looks strange because it's a composed propType; it's saying that the first child CalendarWeek received is not a Day. I'm not sure what it is, though :-/

[majapw]

I wonder if this is due to the blank days (Ie the ones at the beginning and end of each month). But it's weird it's not cropping up in storybook.

[easwee]

Ok I solved it by deleting all node modules, and installing all again, and now can't replicate it anymore... Weird I hate this kind of solutions.

Closing.

[robvree]

I continue to see this warning. Clearning node_modules did not help.

react-dates v16.2.1
react v15.6.2

Warning: Failed prop type: CalendarWeek: invalid value TypeError: CalendarWeek: invalid value supplied to 0.,TypeError: `CalendarWeek` only accepts children of type withStyles(CalendarDay),TypeError: `CalendarWeek` only accepts children of type withStyles(CustomizableCalendarDay) supplied to required children.
    in CalendarWeek (created by CalendarMonth)
    in CalendarMonth (created by withStyles(CalendarMonth))
    in withStyles(CalendarMonth) (created by CalendarMonthGrid)
    in div (created by CalendarMonthGrid)
    in div (created by CalendarMonthGrid)
    in CalendarMonthGrid (created by withStyles(CalendarMonthGrid))
    in withStyles(CalendarMonthGrid) (created by DayPicker)
    in div (created by DayPicker)
    in div (created by DayPicker)
    in div (created by OutsideClickHandler)
    in OutsideClickHandler (created by DayPicker)
    in div (created by DayPicker)
    in DayPicker (created by withStyles(DayPicker))
    in withStyles(DayPicker) (created by DayPickerRangeController)
    in DayPickerRangeController (created by SharePanel)
    in div (created by SharePanel)
    in div (created by StaffHubPanel)
    in div (created by Panel)
    in div (created by Panel)
    in div (created by FocusTrapZone)
    in FocusTrapZone (created by Panel)
    in div (created by Panel)
    in div (created by Popup)
    in Popup (created by Panel)
    in div (created by Fabric)
    in Fabric (created by CustomizedFabric)
    in CustomizedFabric

<DayPickerRangeController
                            startDate={ sharePanelStore.rangeStartDate }
                            endDate={ sharePanelStore.rangeEndDate }
                            onDatesChange={ this.onDatesChange }
                            monthFormat={ this._formatStrings.get("longMonthAndLongYearFormat") }
                            focusedInput={ sharePanelStore.focusedInput }
                            onFocusChange={ this.onRangeSelectFocusChange }
                            firstDayOfWeek={ startDayOfWeek }
                            numberOfMonths={ 2 }
                            minimumNights={ 0 } // allow single day range selection
                            hideKeyboardShortcutsPanel={ true }
                            renderDayContents={ renderDayFunction }
                            navPrev={ this.renderPreviousIcon() }
                            navNext={ this.renderNextIcon() }
                            onNextMonthClick={ this.onNextMonthClicked }
                            onPrevMonthClick={ this.onPrevMonthClicked } />

[roelvan]

I am getting the same error after updating my Next.js project to v5. Also tried removing node modules and reinstalling everything.

[ckeeney]

I get the same error and also recently upgrading my project to Next.js v5, and removing and reinstalling node_modules did not help me either. It hasn't seemed to affect the functionality for my use cases though.

[monotv]

Happens for DateRangePicker too:

main.js:5343 Warning: Failed prop type: CalendarWeek: invalid value TypeError: CalendarWeek: invalid value supplied to 0.,TypeError: `CalendarWeek` only accepts children of type withStyles(CalendarDay),TypeError: `CalendarWeek` only accepts children of type withStyles(CustomizableCalendarDay) supplied to required children.

[bristoljon]

Happens for DayPickerRangeController too on [email protected]:

<DayPickerRangeController
          startDate={this.state.start}
          endDate={this.state.end}
          focusedInput={this.state.focusedInput}
          onDatesChange={this.onDatesChange}
          onFocusChange={this.handleFocusChange}
          numberOfMonths={2}
        />

Warning: Failed prop type: CalendarWeek: invalid value TypeError: CalendarWeek: invalid value supplied to 0.,TypeError: `CalendarWeek` only accepts children of type withStyles(CalendarDay),TypeError: `CalendarWeek` only accepts children of type withStyles(CustomizableCalendarDay) supplied to required children.
    in CalendarWeek (created by CalendarMonth)
    in CalendarMonth (created by withStyles(CalendarMonth))
   ...

[john-mcgowan1992]

I'm seeing this error as well on the initial click on the date picker input.
Running react-date version 16.3.6 and React version 16.2.0. Clearing node modules and reinstalling has no effect for me either. @majapw have you since seen this error emerge/any fresh ideas for what might causing it?

warning.js:33 Warning: Failed prop type: CalendarWeek: invalid value TypeError: CalendarWeek: invalid value supplied to 0.,TypeError: `CalendarWeek` only accepts children of type withStyles(CalendarDay),TypeError: `CalendarWeek` only accepts children of type withStyles(CustomizableCalendarDay) supplied to required children.
    in CalendarWeek (created by CalendarMonth)
    in CalendarMonth (created by withStyles(CalendarMonth))
    in withStyles(CalendarMonth) (created by CalendarMonthGrid)
    in div (created by CalendarMonthGrid)
    in div (created by CalendarMonthGrid)
    in CalendarMonthGrid (created by withStyles(CalendarMonthGrid))
    in withStyles(CalendarMonthGrid) (created by DayPicker)
    in div (created by DayPicker)
    in div (created by DayPicker)
    in div (created by DayPicker)
    in div (created by OutsideClickHandler)
    in OutsideClickHandler (created by DayPicker)
    in div (created by DayPicker)
    in DayPicker (created by withStyles(DayPicker))
    in withStyles(DayPicker) (created by DayPickerSingleDateController)
    in DayPickerSingleDateController (created by SingleDatePicker)
    in div (created by SingleDatePicker)
    in div (created by OutsideClickHandler)
    in OutsideClickHandler (created by SingleDatePicker)

[johnkaza]

anyone solved it? it happens to me too.

[omobosteven]

I'm having the same error message.

I'm using react 16.2.0 and react-dates 16.4.0.

anyone with a solution ?

[Soundvessel]

Same issue with SingleDatePicker. Component and package-lock.json attached if they help.

SingleDatePicker Debug.zip

[breadadams]

Same as @Soundvessel, using SingleDatePicker.

"react": "^16.3.1",
"react-dates": "^16.4.0"

[majapw]

Oh woah? Really? Let me try to repro.

On Wed, Apr 4, 2018, 6:52 PM Brad Adams [e-mail] wrote:

Same as @Soundvessel https://github.com/Soundvessel, using
SingleDatePicker.

"react": "^16.3.1",
"react-dates": "^16.4.0"

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-dates/issues/950#issuecomment-378797646,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUdtbSGUn9a4cCCO834szwrJ-A_a2viks5tlXjngaJpZM4RbkwO
.

[willisplummer]

I'm running into this issue too with single date picker when initializing with date=null 😬

[breadadams]

I can _try_ and create a reproduction repo if that'll help @majapw

[majapw]

Hmm, I thought someone had left a comment previously with a lead. Maybe it got deleted.

@breadadams a repro would be great. None of the examples that have been shared have a configuration that jumps out at me, and I haven't seen anything like that in the storybook with any prop value. :/

[richardgirges]

I'm seeing this exact issue as well. It happens intermittently with the DateRangePicker, can't seem to find a solid repro case :/

    "react": "^16.3.1",
    "react-dates": "^16.6.1",

[obdulia-losantos]

Digging a little bit in the code I found out that react-hot-loader produces the warning.

https://github.com/airbnb/prop-types/issues/39

[ljharb]

The root issue, in the case, would be https://github.com/gaearon/react-hot-loader/issues/304

[paschaldev]

Any solution for this yet. I have react-hot-loader installed too.

[GeneHyatt]

Has there been any progress in resolving this? Or a work around at least?

[Alek-S]

Has anyone had any luck with a workaround or a specific downgrade of react-hot-loader in the meantime?

[ghost]

I did not have the issue with react-dates 16.0.1 and react-hot-loader 3.0.0-beta.5

[lauenroth]

Had the same issue with SingleDatePicker. The problem was that I had date set to null. Once I set it to moment() the warning was gone. Not really a solution but at least I know where the problem lies.

[danieleleoni]

Same here. Following this issue. I will reply if I found any solution.
[email protected]
[email protected]

[jowo-io]

thanks @KurtTuys [email protected] and [email protected] seems to be a good temporary workaround

[erin-michelle]

Following

[cbilenkin]

I'm still having this problem even with [email protected] and [email protected], anyone come up with a workaround?

[AaronFixer]

Problem still seems to persist using hot-loader 4.3.3 with react-dates ^17.0.0

[mnemanja]

It's here with the combination of the following versions as well:
"react-hot-loader": "^4.3.3",
"react-dates": "^17.1.1",

[larsdouweschuitema]

Same issue:
"react-hot-loader": "^4.3.3"
"react": "^16.4.1"
"react-dates": "^17.1.0"

Warning: Failed prop type: CalendarWeek: invalid value TypeError: CalendarWeek: invalid value supplied to 0.,TypeError: `CalendarWeek` only accepts children of type withStyles(CalendarDay),TypeError: `CalendarWeek` only accepts children of type withStyles(CustomizableCalendarDay) supplied to required children.

[Reggino]

Same here

[ljharb]

Hi folks! There's no need to post further "same here", "+1" comments - everyone will forever have this issue until react-hot-loader fixes its bug.

This issue remains open solely so that it's discoverable, so that people don't constantly post duplicate issues about it.

[marshallharry]

sorry

[AaronFixer]

@ljharb Is this still an issue with react-hot-loader specifically? If so, can you advise / link where the new outstanding issue is in the other library? As previously linked topics are closed.

[ljharb]

@AaronFixer i don't use react-hot-loader, so I'd assume that someone experiencing the issue has filed it. https://github.com/gaearon/react-hot-loader/issues/304 however is not closed, and is linked here: https://github.com/airbnb/react-dates/issues/950#issuecomment-381622917

[arturmiglio]

Same issue here:

• react-dates: 17.1.1
• react-hot-loader: 4.2.0

[abradley2]

Encountering the issue ourselves- but appears to possibly be related due to the existence of another theme provider wrapping the component. Anyone else have a similar experience? I will work on putting together an SCCEE

[wtesler]

@abradley2 Did you figure out if it was theme related?

[wallacyyy]

Someone got a solution for this or is looking into it ? Got the same problem 😢

[el-banna]

Isn't there any temporary workaround regarding this?

[arthurgeron]

Isn't there any temporary workaround regarding this?

[email protected] doesn't replicate that issue for me.

[trivopr]

I still get the Issue warning as above. Someone got a solution for this or is looking into it ?
{
"react": "^16.3.2",
"react-dates": "^16.6.1",
}

FYI @majapw

[arthurgeron]

@Alek-S see my previous comment

[nathanmarks]

@arthurgeron Same issue with hot loader v4 though

[arthurgeron]

@nathanmarks yeah if I upgrade to hot loader 4.x the issue shows up again.

[janjanarnaldo]

is there any fix for this already? 😺

[ljharb]

@janjanarnaldo again, any fix would have to come from react-hot-loader, as it's a bug there - this bug can't appear without module rewiring hacks.

See https://github.com/airbnb/react-dates/issues/950#issuecomment-407866527.

[janjanarnaldo]

Thanks for the prompt reply @ljharb I tried the workarounds above (downgrade RHL to 3.0.0) and the error disappeared. But it leads me to another problem, there's no calendar appearing on SingleDatePicker, will be in a different issue.

[majapw]

I'm marking this issue as wontfix and locking comments since the solution is in another package (react-hot-loader). I'll keep it open until the root cause is addressed.

For context, https://github.com/gaearon/react-hot-loader/issues/304 is the relevant issue in RHL.