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

SSR not supported? #34

Open
mrvnklm opened this issue Sep 6, 2020 · 2 comments
Open

SSR not supported? #34

mrvnklm opened this issue Sep 6, 2020 · 2 comments

Comments

@mrvnklm
Copy link

mrvnklm commented Sep 6, 2020

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

rylax commented Aug 3, 2021

Same thing is happening on Nuxt.js SSR

@p-kat
Copy link

p-kat commented Aug 6, 2021

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

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

No branches or pull requests

3 participants