AlbertLucianto / vue-text-highlight

Text highlighter library for Vue.js :lipstick:
https://albertlucianto.github.io/vue-text-highlight
MIT License
327 stars 35 forks source link

SSR not supported? #34

Open mrvnklm opened 4 years ago

mrvnklm commented 4 years ago

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)
rylax commented 3 years ago

Same thing is happening on Nuxt.js SSR

p-kat commented 3 years ago

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'); } } },