v-scroll-lock
v-scroll-lock copied to clipboard
Not working with Nuxt SSR
I tried to integrate it with Nuxt but apparently, it's not SSR compatible. Could it be modified to work with Nuxt? Thanks
+1
I managed to get it working as a client plugin, however since this package directly references the window which is not available on the server side when rendering it will throw errors when trying to run on the server side.
plugins/v-scroll-lock.ts
import Vue from "vue";
import VScrollLock from "v-scroll-lock";
Vue.use(VScrollLock);
nuxt.config.ts
plugins: [
{ src: "~/plugins/v-scroll-lock", mode: "client" },
],
Im using the Gridsome Site Generator. Everything works fine in Dev-Mode. But when using the build mode i also experience the following error:
Failed to render / ReferenceError: window is not defined at Object.<anonymous> (node_modules/v-scroll-lock/dist/v-scroll-lock.js:10:1) at __webpack_require__ (webpack/bootstrap:25:0) at Module.<anonymous> (assets/js/app.59f3b7d5.js:7596:21) at __webpack_require__ (webpack/bootstrap:25:0) at Module.<anonymous> (node_modules/gridsome/app/main.js:4:9) at __webpack_require__ (webpack/bootstrap:25:0) at Object.<anonymous> (assets/js/app.59f3b7d5.js:3811:18) at __webpack_require__ (webpack/bootstrap:25:0) at assets/js/app.59f3b7d5.js:118:18 at Object.<anonymous> (assets/js/app.59f3b7d5.js:121:10)
getting the same issues with Nuxt SSR
It's not working on Nuxt SSR
I tried to import the same source code in this git repo, but it failed. getting error below
ERROR Failed to compile with 1 errors friendly-errors 23:04:28
ERROR in ./plugins/test.ts friendly-errors 23:04:28
Module parse failed: Unexpected token (5:8) friendly-errors 23:04:28 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | import VScrollLockInterface from './interfaces/v-scroll-lock.interface' |
declare global { | interface Window { | Vue?: VueConstructor friendly-errors 23:04:28 @ ./plugins/vue-scroll-lock.js 2:0-36 3:8-19 @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js