Static GitHub Issues

[144] ReferenceError: document is not defined after load route from client browser

prev: nuxt generate paths
next: Very bad flash of unstyled content when trying the starter template

Hello.

I try to update/reload function (after click and land on page trough <nuxt-link>), who make pretty background image (I'm using my own npm package: https://www.npmjs.com/package/goodbackground.js) for container with data-background-image attribute.

On my nuxt.config.js:

...
build: {
  vendor: [
    'goodbackground.js'
  ]
},
...

I use beforeCreate instance into this index.vue file:

<template>
  <div>
    <section data-background-image="/images/projects/background.jpg">
      Hello World!
    </section>
  </div>
</template>

<script>
  require('goodbackground.js');

  export default {
    head () {...},
    beforeCreate () {
      new GoodBackground().make();
    }
  }
</script>

But Nuxt.js show me red error page with message:

ReferenceError: document is not defined
    at t.value (node_modules/goodbackground.js/goodbackground.min.js:1:1392)
    at Object.<anonymous> (node_modules/goodbackground.js/goodbackground.min.js:1:2432)
    at e (node_modules/goodbackground.js/goodbackground.min.js:1:163)
    at node_modules/goodbackground.js/goodbackground.min.js:1:546
    at Object.<anonymous> (node_modules/goodbackground.js/goodbackground.min.js:1:555)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)

This is simple code of my package: https://github.com/koddr/goodbackground.js/blob/master/src/goodbackground.js

Whats wrong? I don't see this if I reload page (cmd+R).. How to fix it?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c119">#c119</a>)</em></sub></div>