Gridsome: Build failed: Window is not defined

[rinkesh412]

Description

When I try to build , I am getting error : Window is not defined. But gridsome develop is working fine. I have added jquery module in default layout . window.jQuery = require('jquery');

Please help me about this issue.

Thanks

[hacknug]

window is only available from the client so you need to check for that before trying to do anything with it. Can read more about it on the docs here: https://gridsome.org/docs/client-api/#isclient

[rinkesh412]

Thanks for reply.
So in order to build app, what would I use in place of window ? I just check process.isClient return TRUE. In what manner, should I use jQuery which will work for me in development and deployment ?

Thanks

[hacknug]

Not sure where you're using this or how but something like this might work:

if (process.isClient) {
  window.jQuery = require('jquery');
}

[RedNoo]

I'm getting same error, @rinkesh412 did you find any solution?

[mittalyashu]

I am facing the exact same issue.

[rinkesh412]

I'm getting same error, @rinkesh412 did you find any solution?

No.

[dominiquedutra]

@rinkesh412

It's hard to tell without knowing exactly what you are trying to accomplish with jQuery. Is it a full featured plugin? Is it a simple function / dom manipulation?

Keep in mind that (almost) everything will work on Dev mode because it is not rendering the html server side, it's just live serving so you could hook a jquery calendar plugin in there and have it working.

Please read the "Without SSR support" block for example of how to import jQuery.
https://gridsome.org/docs/assets-scripts/#without-ssr-support

Wrap any html blocks that are manipulated by jQuery with tags in order to tell Gridsome that it should not touch this on build.

Also, I would strongly recommend you not to mix jQuery with VueJS (Gridsome). I know there are a lot jQuery material out there but you will thank me later. Basically you can accomplish everything with vue components.

[shayaulman]

I also got the error window is not defined at build time.
I figured out that this is because Gridsome renders the code on the server where window is not defined.
So my solution was to call window from a Vue life-cycle hook that is not called during server side rendering, like mounted().
See the list of the life-cycle hooks in the Vue docs, to see which is rendered only on client side.

[Berkmann18]

I'm facing the same issue but using vue-scrollmagic.

[matteodem]

Using process.isClient and global instead of window worked for me.

if (process.isClient) {
  vuexLocalPlugin = new VuexPersistence({
    storage: global.localStorage,
  }).plugin
}

[ukristen]

I'm facing the same issue but using vue-scrollmagic.

@Berkmann18 did you solve your issue with vue-scrollmagic?

[Berkmann18]

@ukristen Using vue-scrollmagic? Yes.
Using vue-beautiful-chat? Nope.

[ukristen]

Can you share your solution for vue-scrollmagic? I have the same issue using ks-vue-scrollmagic.

[Berkmann18]

@ukristen Have you looked at my comment on the issue I raised on the ks-vue-scrollmagic repo? TL;DR: Using a more bare-bones approach following one of the Gridsome No-SSR solutions (none of which work for something like vue-beautiful-chat so far :s).

[ukristen]

Sorry, didn't see that it was in the 'closed' issues section. Seeing it now.

[weleo]

Using process.isClient and global instead of window worked for me.

if (process.isClient) {
  vuexLocalPlugin = new VuexPersistence({
    storage: global.localStorage,
  }).plugin
}

@matteodem
Could you share a full example of your main.js? I am struggling with the implementation😂

[sureshvv]

gapi_client.js has a reference to "window". This is causing failure when I build.

Does it make sense to import gapi_client only in the client?

[m3hari]

Here is how it works with vuex-persistedstate

src/store/index.js

import createPersistedState from 'vuex-persistedstate'
import cart from './cart'

const store = {
  modules: {
    cart,
  },
  plugins: [],
}

if (process.isClient) {
  store.plugins.push(createPersistedState({}))
}

export default store

main.js

import store from '~/store'

export default function (Vue, { appOptions, router, head, isClient }) {

  appOptions.store = new Vuex.Store(store)
}

[seeratawan01]

I was facing the same issue, resolve it by adding following into my main.js file

if (process.isClient) {
    const VueCountdownTimer = require('vuejs-countdown-timer').default;
    Vue.use(VueCountdownTimer);
}