[Nuxt.js] Datepicker stop working on SSR

[juan-manuel-alberro]

Overview of the problem

Buefy version: 0.5.1
Vuejs version: 2.4.2
OS/Browser: Mac / Linux
Nuxt.js: 1.0.0-rc8

Description

The datepicker component works perfect in Nuxt until you refresh the page and the page is rendered in the server side, you get navigator is not defined

Steps to reproduce

1. Add a date picker component into a .vue file
2. Navigate to that page and verify that the component is working
3. Refresh page (cmd + R or F5)
4. 💣

Expected behavior

Render the date picker without any error

Actual behavior

Page is not working since navigator is not defined (screenshot below)

[jtommy]

@juan-manuel-alberro It's fixed!
Anyway if you want to use native datepicker, you have to inject current user agent to enable the correct mobile detection because Buefy depends on existence of window.navigator.userAgent to do it.

[juan-manuel-alberro]

Lovely, thanks @jtommy!

[davegriffin]

We've also seen a similar issue with a Nuxt.js project and observed a different and somewhat non-sensical error message in the server logs related to the time/date pickers (expected Date, got Date), but wrapping the b-datepicker / b-timepicker component references in <no-ssr> </no-ssr> tags resolved the issue. (The pickers were working fine on the client, just throwing errors in the server log.)

Just an FYI for anyone looking for a workaround.

[jtommy]

Thanks @davegriffin but maybe the correct place is this issue https://github.com/buefy/nuxt-buefy/issues

[davegriffin]

Fair point! Googling found this first, but I'll make mention of it there as well (perhaps it can be resolved!) Thank you!