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)