vue-text-highlight
vue-text-highlight copied to clipboard
SSR not supported?
I am developing an server side rendered app (using quasar framework) which does not work with vue-text-highlight even though I exclude the component from being rendered on the server.
webpack output is served from /
/a53e2c7b74cda87c8ba6.hot-update.json -> error during render
ReferenceError: document is not defined
at /Users/marvin/sites/lumen/quasar/node_modules/vue-text-highlight/dist/vue-text-highlight.umd.js:1579:14
at /Users/marvin/sites/lumen/quasar/node_modules/vue-text-highlight/dist/vue-text-highlight.umd.js:2:83
at Object.<anonymous> (/Users/marvin/sites/lumen/quasar/node_modules/vue-text-highlight/dist/vue-text-highlight.umd.js:5:2)
at Module._compile (internal/modules/cjs/loader.js:1138:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (internal/modules/cjs/helpers.js:72:18)
at r (/Users/marvin/sites/lumen/quasar/node_modules/vue-server-renderer/build.dev.js:9310:16)
at Object.vue-text-highlight (webpack:/external "vue-text-highlight":1:0)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module../src/router/index.js (server-bundle.js:1574:76)
at __webpack_require__ (webpack/bootstrap:25:0)
at Module../.quasar/app.js (server-bundle.js:142:78)
at __webpack_require__ (webpack/bootstrap:25:0)
Same thing is happening on Nuxt.js SSR
Same thing is happening on Nuxt.js SSR
For Nuxt.js, my solution was to dynamically import the package only when on client mode.
for example
components: { 'text-highlight': () => { if (process.client) { return import('vue-text-highlight'); } } },