FranckFreiburger / vue-pdf

vue.js pdf viewer

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`window` is not defined in worker file

a47ae opened this issue · comments

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: webpack/webpack#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'
}

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
    }
  }
}

💯 @a47ae @rayfoss you guys are heroes 🥇

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')

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

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

i still get with NUXT
Unexpected token <

@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

commented

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

commented

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

commented

Still waiting

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

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

commented

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...
Screenshot from 2019-04-25 13-41-30

Working solution on this link #148

commented

Solve this issue for nuxt.js
👇
#148 (comment)