Compatiblity with nuxtjs / SSR?

[muhajirdev]

I tried to use keen-ui with nuxtjs.

But when i run npm run dev keep getting error document is not defined.

Vue.js error

ReferenceError: document is not defined
    at Object.<anonymous> (/home/muhajir/res/suryasatelite.org/node_modules/keen-ui/dist/keen-ui.js:10374:1)
    at __webpack_require__ (/home/muhajir/res/suryasatelite.org/node_modules/keen-ui/dist/keen-ui.js:35:30)
    at Object.<anonymous> (/home/muhajir/res/suryasatelite.org/node_modules/keen-ui/dist/keen-ui.js:4211:1)
    at __webpack_require__ (/home/muhajir/res/suryasatelite.org/node_modules/keen-ui/dist/keen-ui.js:35:30)
    at Object.<anonymous> (/home/muhajir/res/suryasatelite.org/node_modules/keen-ui/dist/keen-ui.js:15017:1)
    at __webpack_require__ (/home/muhajir/res/suryasatelite.org/node_modules/keen-ui/dist/keen-ui.js:35:30)
    at module.exports.rawScriptExports (/home/muhajir/res/suryasatelite.org/node_modules/keen-ui/dist/keen-ui.js:81:18)
    at /home/muhajir/res/suryasatelite.org/node_modules/keen-ui/dist/keen-ui.js:84:10
    at webpackUniversalModuleDefinition (/home/muhajir/res/suryasatelite.org/node_modules/keen-ui/dist/keen-ui.js:8:20)
    at Object.<anonymous> (/home/muhajir/res/suryasatelite.org/node_modules/keen-ui/dist/keen-ui.js:15:3)

I tried to follow the guidelines on nuxtjs. ( https://nuxtjs.org/guide/plugins/ , https://nuxtjs.org/faq/window-document-undefined/ )

I have tried to use the plugin on the client side only

if (process.BROWSER_BUILD) {
  Vue.use(KeenUI)
 }

build: {
    vendor: ['keen-ui']
  }

But everything works perfectly when i try to use element-ui

Just wondering, is keen-ui SSR friendly? Btw, good work on this UI , i love it :)

[JosephusPaye]

I haven't tried Keen UI with Vue's SSR, and it may not be compatible due to use of the document global.

However, try:

if (process.BROWSER_BUILD) {
    var KeenUI = require('keen-ui').default;
    Vue.use(KeenUI);
}

This may help, as using require (and not import) ensures Keen UI code is only executed for a browser build.

[MarcPorciuncula]

I'm having this problem too, requiring only for the browser build works temporarily if you're just developing, but it causes Vue to have to completely rerender instead of rehydrate, which is definitely not ideal and not suitable for production. Also for me UiTextboxes don't seem to be showing up at all after a server render and subsequent client rerender.

Haven't had a chance to poke around the source yet but I might just go around and naively wrap every use of document in if (typeof document !== 'undefined')

[MarcPorciuncula]

So far I've tried adding checks to helpers/modality.js and config.js, but now I'm getting a dependency called tether-drop trying to access document which is used in UiPopover.vue. Not sure how I should go about conditionally requiring it .

[Pitu]

Has there been any new developments regarding this issue?

[JosephusPaye]

Hey @Pitu,

Unfortunately there's nothing yet. This is something I'm looking into for the upcoming v1.1 release.

[Pitu]

Looking forward to the new version, just want to mention that the PR made by @MarcoThePoro solves the issue. Made a fork and applied the patches and haven't had any problems so far.

[JosephusPaye]

Cool. Currently listening to your radio stream on https://listen.moe and even though I don't understand the language, I think it's pretty good! 👍

[Pitu]

Haha glad you are enjoying it! 🎵

[hackuun]

@JosephusPaye hello, any news regarding SSR/Nuxt support?

[JosephusPaye]

Hi @iamdubx, unfortunately, there are no plans for SSR support in the near future.

[hagemann]

Is that still the case @JosephusPaye? Unfortunately, no SSR compatibility is a deal-breaker as SEO-friendly websites with readable HTML elements are absolutely critical. As @muhajirdev mentioned, it works with Element UI. There may be something you can copy from.