ReferenceError: window is not defined

[edugrip]

despite using client only code the above error is generated.
For example using this @johmun/vue-tags-input repository.

the reason is that when we import this in the component, this creates an error.

import ClientOnly from "vue-client-only";
import VueTagsInput from "@johmun/vue-tags-input";
export default {
...
...

Template:

<vue-client-only>
    <vue-tags-input v-model="tag" :tags="tags" @tags-changed="newTags => tags = newTags" />
  </vue-client-only>

....
...
so how can we import the js with window and docuemnt variables without generating an error?

[vue-router] Failed to resolve async component default: ReferenceError: window is not defined
[vue-router] uncaught error during route navigation:
ReferenceError: window is not defined
at Object. (/projects/test/hacker/node_modules/@johmun/vue-tags-input/dist/vue-tags-input.js:1:268)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at r (/projects/test/hacker/node_modules/vue-server-renderer/build.dev.js:9295:16)
at Object. (server-bundle.js:3772:18)
at webpack_require (server-bundle.js:27:30)
at Object.117 (4.server-bundle.js:24:81)
at webpack_require (server-bundle.js:27:30)
at Object.116 (4.server-bundle.js:8:191)
at webpack_require (server-bundle.js:27:30)
at Object.81 (4.server-bundle.js:836:96)

[egoist]

Ask @johmun/vue-tags-input to support SSR. 😄

[edugrip]

Is it possible to solve this with this package? If not then what are the use-cases for this package( vue-client-only).

[0xradical]

@edugrip when ssr picks up the lib, even if you don't render due to client-only, the lib still has to make sense ssr-wise, hence @egoist's answer. What you can do is to either ask for SSR support or define an alias on your bundler that compiles your server-side component to nothing (kind of like Nuxt does with plugins and mode: server)

[edugrip]

@thiagobrandam , if the lib makes sense ssr-wise, why would it not render on ssr?

Or is this library for those components who can be rendered on server but you do not want them to be rendered there ?

[kedrzu]

Check the PR above for the fix :)

[janlazo]

Had this issue today because the client-only component loads an async component that should run in the browser only. Using scoped slots would fix the problem.

https://forum.vuejs.org/t/defer-evaluation-of-conditionally-rendered-slots/32869/4

[GeoffreyOlivier]

Hello, same probleme with Alex-D/Cookies-EU-banner . So if I understand, there no solutions ?

[kedrzu]

There is, but I have to fix my PR, because there's error in it.