document is not defined error when building with Gridsome Vue site generator

[somascope]

I am using Gridsome for a project to create a static website, and have tried using the plyr component. Things work nicely in gridsome's "develop" mode ($gridsome develop), but once I try to build ($gridsome build), I receive a reference error.

the "/video/" reference in the error is the Vue component/page that I placed an insteance of vue-plyr onto.

Could not generate HTML for "/video/": ReferenceError: document is not defined at addStyle (node_modules/vue-plyr/dist/vue-plyr.mjs:159:0) at assets/js/app.08a6ebf4.js:41717:27 at a.__vue_inject_styles__ (node_modules/vue-plyr/dist/vue-plyr.mjs:204:0) at a.hook (node_modules/vue-plyr/dist/vue-plyr.mjs:114:0) at Ft (E:\Dev\gridsome-test4\node_modules\vue\dist\vue.runtime.common.prod.js:6:11191) at Ze (E:\Dev\gridsome-test4\node_modules\vue\dist\vue.runtime.common.prod.js:6:25133) at a.e._init (E:\Dev\gridsome-test4\node_modules\vue\dist\vue.runtime.common.prod.js:6:32564) at new a (E:\Dev\gridsome-test4\node_modules\vue\dist\vue.runtime.common.prod.js:6:30340) at Vi (E:\Dev\gridsome-test4\node_modules\vue-server-renderer\build.prod.js:1:66305) at io (E:\Dev\gridsome-test4\node_modules\vue-server-renderer\build.prod.js:1:70535)

I see four instances of "document" in the "vue-plyr.mjs" file, they seem to be related to setting the stylesheet.

[redxtech]

Try using the SSR optimized version. Since gridsome is essentially rendering the page on the server (when building), that should work better.

[eoinom]

Hi,

I was getting a similar issue and tried using the SSR version but am still gettng errors when running gridsome build:

ReferenceError: document is not defined at assets/js/app.a749507d.js:10833:6983 at Module.<anonymous> (node_modules/plyr/dist/plyr.min.mjs:1:7249) at __webpack_require__ (webpack/bootstrap:25:0) at Object.<anonymous> (node_modules/vue-plyr/dist/vue-plyr.ssr.js:5:27) at __webpack_require__ (webpack/bootstrap:25:0) at Module.<anonymous> (assets/js/app.a749507d.js:50390:20) at __webpack_require__ (webpack/bootstrap:25:0) at Object.<anonymous> (assets/js/app.a749507d.js:7409:18) at __webpack_require__ (webpack/bootstrap:25:0) at assets/js/app.a749507d.js:118:18

Any ideas?

[somascope]

I’ve found this issue in a few libraries that have UI layers. It seems that if they require anything to do with “document” or “window” this happens. I’ve had some success by only doing whatever initialization the library/package needs in a Vue SFC’s mounted() lifecycle hook. I think that otherwise, if something is trying to immediately access “document”, perhaps that’s not available (until component mount).

[redxtech]

This project doesn't use document or window in any places other than where they've been tested to not be undefined.

Might be an issue with upstream.

If not let me know and I'll see if there's something I'm missing.

[seifertm]

I am experiencing the same problem using vue-plyr with vuepress SSR and filed an upstream bug.

[redxtech]

My recommendation is to prevent this component from server rendering, and let it be taken care of by the client.

[eladcandroid]

@redxtech I don't understand how to handle it on client.
I'm using with Quasar SSR mode.
Vue-plyr worked great until 7.x version