nuxt-buefy: [Vue warn]: Invalid prop: type check failed for prop "maxDate". Expected Date, got Date

Hello,

I am using Nuxt-Buefy (latest version) with the latest version of Nuxt (2.4.5). When I use the datepicker component and put a v-model, min-date or max-date, I have a persistent warning when the page is loaded server-side:

[Vue warn]: Invalid prop: type check failed for prop "maxDate". Expected Date, got Date

Reproducer

yarn create nuxt-app testnuxt (choose Universal)
yarn add nuxt-buefy
Add 'nuxt-buefy' module in the nuxt.config.js 
Add <b-datepicker :max-date="new Date()" /> in the index.vue

When the page is loaded server-side, these warnings appear in the server console: "[Vue warn]: Invalid prop: type check failed for prop “maxDate”. Expected Date, got Date " When the page is loaded client-side, there is no problem.

Nuxt version

I tested it with Nuxt 2.3.4, I had no warning and no issue. The problem exists since Nuxt version 2.4.

When I switched to version 2.4, I also had this issue which I think is the same: https://github.com/davestewart/vuex-pathify/pull/46 (in both cases it’s the “instanceof” method that isn’t working anymore since Nuxt 2.4)

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 13
Comments: 20 (1 by maintainers)

Commits related to this issue

https://github.com/buefy/nuxt-buefy/issues/36 — committed to bazzi-gg/web2 by deleted user 2 years ago

Most upvoted comments

@ilbonte @davegriffin @SebastienTainon So I investigated this issue with the help of manniL from the nuxt team.

The warning is present only in DEV and never in production, and is because of this feature: https://github.com/nuxt/nuxt.js/pull/4508

TLDR: in dev mode some components are built in parallel so the date instance is different and so instanceof fails.

DonNicoJs on May 2, 2019

We’ve also seen a similar issue with a Nuxt.js project: wrapping the b-datepicker / b-timepicker component references in <no-ssr> </no-ssr> tags resolved the issue. (As noted, the pickers were working fine on the client, just throwing errors in the server log.)

Just an FYI for anyone looking for a workaround and a cleaner log file. (thanks to @jtommy for the hint that the issue was reported here)

davegriffin on May 1, 2019

I came up with this temp fix:

<b-datepicker :min-date="minDate"></b-datepicker>

data() {
  return {
    minDate: undefined,
  }
},
mounted(){
  this.minDate = new Date()
}

Is this fine, or is it going to backfire somehow?

vakrolme on Oct 7, 2019

Seems like no one in Nuxt cares: https://github.com/nuxt/nuxt.js/issues/5565

The problem can be simplified to: new Date() instanceof Date being false in dev version. Ridiculous.

IlyaSemenov on Jun 4, 2019

@davegriffin just remember that that way you are not rendering the datepicker on the first html spit out by the server

DonNicoJs on May 2, 2019

@DonNicoJs thanks for the support 😃 I’m using nuxt 2.6.2 Here is a demo: https://codesandbox.io/s/yql12vywjz

ilbonte on Apr 25, 2019