Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compatiblity with nuxtjs / SSR? #261

Open
muhajirdev opened this issue Feb 27, 2017 · 11 comments · May be fixed by #277
Open

Compatiblity with nuxtjs / SSR? #261

muhajirdev opened this issue Feb 27, 2017 · 11 comments · May be fixed by #277
Labels

Comments

@muhajirdev
Copy link

muhajirdev commented Feb 27, 2017

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
Copy link
Owner

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
Copy link

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
Copy link

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 .

@MarcPorciuncula MarcPorciuncula linked a pull request Mar 11, 2017 that will close this issue
@Pitu
Copy link

Pitu commented Sep 20, 2017

Has there been any new developments regarding this issue?

@JosephusPaye
Copy link
Owner

Hey @Pitu,

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

@Pitu
Copy link

Pitu commented Sep 20, 2017

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
Copy link
Owner

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
Copy link

Pitu commented Sep 20, 2017

Haha glad you are enjoying it! 🎵

@hackuun
Copy link

hackuun commented Feb 7, 2018

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

@JosephusPaye
Copy link
Owner

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

@hagemann
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants