ReferenceError: window is not defined

edugrip commented 5 years ago

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 commented 5 years ago

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

edugrip commented 5 years ago

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

0xradical commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

Check the PR above for the fix :)

janlazo commented 4 years ago

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 commented 4 years ago

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

kedrzu commented 4 years ago

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

egoist / vue-client-only

ReferenceError: window is not defined #41