[Vue warn]: Invalid prop: type check failed for prop "maxDate". Expected Date, got Date
See original GitHub issueHello,
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)
Issue Analytics
- State:
- Created 5 years ago
- Reactions:11
- Comments:19
@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.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)