Vue SSR and Gridsome: ReferenceError: window is not defined

Question

When using Gridsome with Hotjar using the following code snippet in src/main.js:

import Hotjar from 'vue-hotjar';
Vue.use(Hotjar, {
        id: 'HOTJAR_ID'
        });

I get this error:

ReferenceError: window is not defined

To my understanding, this comes from the fact that there is a SSR going on and Hotjar is using window DOM API object.

Answer 1

You need process injection... 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: isClient