Gridsome - ReferenceError: window is not defined

[JakeHenshall]

Description

Hi,

I'm using Gridsome but keep getting this issue.

Error:

ReferenceError: window is not defined
    at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:94:166)
    at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
    at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:132:0)
    at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
    at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:102:0)
    at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
    at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:268:0)
    at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
    at assets/js/app.5629819a.js:2833:18
    at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:82:0)

src/main.js

import DefaultLayout from '~/layouts/Default.vue';

import VueFullPage from 'vue-fullpage.js';

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout);

  Vue.use(VueFullPage);
}

I'm getting 'Cannot resolve file 'vue-fullpage.js''.

It works perfect on local it's only when I try to run it on Netlify?! But I still do get the ReferenceError: window is not defined locally, it just seems to work.

Please help,

Thanks, Jake.

[alvarotrigo]

I never used Gridsome :) Any idea what can this be @dobromir-hristov? @vaso2 ?

[dobromir-hristov]

Its the same as Gatsby. You it is a server side rendered framework. It is the same concept as with Nuxt. You have to render it on the client only.

[JakeHenshall]

@dobromir-hristov Thanks for replying do you have an example of the best way todo this?

Thanks, Jake.

[alvarotrigo]

@dobromir-hristov perhaps this is something we could mention in the docs?

[dobromir-hristov]

I think ppl can use the contect.isClient to attach it to client side only, though I am not sure. Have not tinkered with Gridsome.

But yeah, we should add it.

[alvarotrigo]

@dobromir-hristov if you let me know what should we add in the docs I'll make the changes and proceed to close this issue.

Let's give the people some indications in case they use Gridsome :)

[dobromir-hristov]

Here is an example on how to do it: https://codesandbox.io/s/vue-fullpage-gridsome-example-pp5pf Ofc this means no server generated content from inside the Full Page component.

More on the topic: https://gridsome.org/docs/assets-scripts/#without-ssr-support

[dobromir-hristov]

// main.js

export default function(Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component("Layout", DefaultLayout);
  if (isClient) {
    Vue.use(VueFullPage);
    require("fullpage.js/dist/fullpage.min.css");
  }
}

<template>
// some layout file
  <Layout>
    <ClientOnly>
      <full-page ref="fullpage" :options="options" id="fullpage">
        <div class="section">First section ...</div>
        <div class="section">Second section ...</div>
      </full-page>
    </ClientOnly>
  </Layout>
</template>

[nielslam]

This is still not working for me.

I get the following build error:

ReferenceError: window is not defined
    at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:94:166)
    at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
    at Object.module.exports.module.exports.Object.defineProperty.value (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:132:0)
    at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
    at Object.module.exports.module.exports.Object.defineProperty.value (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:102:0)
    at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
    at Object.module.exports.module.exports.module.exports.rawScriptExports (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:268:0)
    at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
    at assets/js/app.61c30c5b.js:3370:18
    at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:82:0)

main.js:

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout);
  Vue.use(VueTilt);
  if(isClient) {
    Vue.use(vFullpage);
  }
}

index.vue:

<template>
    <Layout>
        <ClientOnly>
            <full-page :options="fpOptions" id="fullpage">
                <!-- Section 1-->
                <div class="section">
                </div>

                <!-- Section 2 -->
                <div class="section">
                </div>

                <!-- Section 3 -->
                <div class="section">
                </div>
            </full-page>
        </ClientOnly>
    </Layout>
</template>

[dobromir-hristov]

Hey, check the sandbox, it works pretty OK there :/ not sure how to help further.

[nielslam]

The sandbox works perfectly fine. However, if you run gridsome build you would get the same error.

In my own project I switched to https://github.com/alvarotrigo/fullpage.js doing this in my template (dirty solution):

<script>
    export default {
        mounted() {
            window.fullpage = require("fullpage.js");
            var fp = new fullpage("#fullpage");
        }
    }
</script>

[alvarotrigo]

```js
// main.js

export default function(Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component("Layout", DefaultLayout);
  if (isClient) {
    Vue.use(VueFullPage);
    require("fullpage.js/dist/fullpage.min.css");
  }
}

<template>
// some layout file
  <Layout>
    <ClientOnly>
      <full-page ref="fullpage" :options="options" id="fullpage">
        <div class="section">First section ...</div>
        <div class="section">Second section ...</div>
      </full-page>
    </ClientOnly>
  </Layout>
</template>

Should we add this in the docs then? Or perhaps just point to the codesanbox you created?

We can make a Wiki page for it if necessary too.

[nicolaisimonsen]

Gridsome and fullpage.js together? Sounds like heaven and a whopper just made a baby. Anyway, try this out:

// main.js  

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

    if (isClient) { 
        const VueFullPage = require("vue-fullpage.js").default;
        Vue.use(VueFullPage);
    }

}

It's gonna build. I think... 🙂

[nicolaisimonsen]

@nielslam @JakeHenshall 👆

[sarahdayan]

The code from @nicolaisimonsen should work. The trick is that he imported VueFullPage in the condition; therefore, when gridsome builds runs the code, it never goes there and never encounters the window variable in a Node context (which is what triggers the error).

I can update the README if you want @alvarotrigo.

[alvarotrigo]

Thanks @sarahdayan !!! 🙌🙌🙌🙌

[sarahdayan]

You're welcome @alvarotrigo 🙂 This issue can be closed by the way.

[alvarotrigo]

I'll close it when I metre the Dev branch into the master with the new release.

[brunomarks7]

Check the SSR support, you can try this method: https://gridsome.org/docs/assets-scripts/#without-ssr-support

[amonmoce]

Gridsome and fullpage.js together? Sounds like heaven and a whopper just made a baby. Anyway, try this out:

// main.js  

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

    if (isClient) { 
        const VueFullPage = require("vue-fullpage.js").default;
        Vue.use(VueFullPage);
    }

}

It's gonna build. I think... 🙂

This worked for me