0

I have a VuePress project and I just need to include a local js file in a component for a gallery. The .js file is referencing the window object and my project refuses to build:

(node:57059) UnhandledPromiseRejectionWarning: ReferenceError: window is not defined
    at isMobile (4.server-bundle.js:1470:27)
    at 4.server-bundle.js:3343:20
    at 4.server-bundle.js:937:109
    at Object.345 (4.server-bundle.js:942:3)
    at __webpack_require__ (server-bundle.js:27:30)
    at Module.356 (4.server-bundle.js:5022:17)
    at __webpack_require__ (server-bundle.js:27:30)
(node:57059) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 49)
(node:57059) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

From the docs I understand I'm only supposed to reference window in the mounted lifecycle method. But what about other scripts? How do I deal with that?

Here is how I'm including the script:

</template>
<script>
import * as GLightbox from '../assets/scripts/glightbox.js'

export default {
// ...

And here is how I'm using it:

// ...
mounted: function () {
  this.lightbox = GLightbox({
      touchNavigation: true,
      loop: true
  })
},

Cheers

Nikolay Dyankov
  • 6,491
  • 11
  • 58
  • 79
  • Does this answer your question? [How to add external JS scripts to VueJS Components](https://stackoverflow.com/questions/45047126/how-to-add-external-js-scripts-to-vuejs-components) – Ohgodwhy Feb 16 '21 at 19:01
  • @Ohgodwhy Tried it, had trouble with the paths. Then I looked again in the official docs and turns out I just needed to scroll down - https://vuepress.vuejs.org/guide/using-vue.html#browser-api-access-restrictions - you do it with an import() in the mounted() method. If you want you can type it up as a short answer. – Nikolay Dyankov Feb 16 '21 at 19:07

0 Answers0