`window` is not defined in worker file

[a47ae]

This is not really an issue with vue-pdf but I ran into this recently and tought it may be worth sharing. When using vue-pdf with Webpack 4 (e.g. a project created by vue-cli v3) the dev build with hot reloading gave the following error message:

window is not defined in worker[hash].js

and vue-pdf did not display anything.

This only occurs on development builds with hot reloading, on production it is fine. After investigating I found the following issue to be the reason why this happens: https://github.com/webpack/webpack/issues/6642

Until this is fixed in webpack the following workaround did work for me. In the Webpack config set the following option:

 output: {
  globalObject: 'this'
}

[FossPrime]

with vue-cli v3 there is none, and vue.config.js doesn't have an output config.. but it does have configureWebpack...

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss";`
      }
    }
  },
  configureWebpack: {
    output: {
      globalObject: 'this' // `typeof self !== 'undefined' ? self : this`'' -- not working
    }
  }
}

[kartsims]

:100: @a47ae @rayfoss you guys are heroes :1st_place_medal:

[nothingismagick]

If you end up here via the Quasar framework, you can use chainWebpack in your quasar.conf.js:

    build: {
      chainWebpack(chain) {
        chain.output.set('globalObject', 'this')

[coreycoburn]

In Nuxt, you can get this to work in nuxt.config.js:

extend(config, ctx) {
  config.output.globalObject = 'this'
}

[frederic117]

i still get with NUXT Unexpected token <

[coreycoburn]

@frederic117

Make sure you also add ssr: false in your nuxt.config.js file if you are using Nuxt in universal mode.

plugins: [
  { src: '@/plugins/pdf', ssr: false },
]

https://nuxtjs.org/guide/plugins/#client-side-only

[frederic117]

yes i did that to, but still get Unexpected token < i really don't get what happens :(

[imaxing]

I have the same problem. I don't know why it happened.

[frederic117]

Still waiting

[FranckFreiburger]

@frederic117, @imaxing, for Unexpected token < please refer to issue #13

[HealerNguyen]

In Nuxt, you can get this to work in nuxt.config.js:

extend(config, ctx) {
  config.output.globalObject = 'this'
}

this saved me :D , thank you @coreycoburn

[io-ma]

Not working for me. I am not able to load the PDF no matter what I do (place it in the /static dir or on a server). Using webpack 4 too :-( Tried the 'this' trick, but it's still blank...

[zardilior]

Working solution on this link FranckFreiburger/vue-pdf#148

[mryassera]

Solve this issue for nuxt.js 👇

148 (comment)