Absolute path for worker.js

[tsauvajon]

While the pdf viewer works well in local, I have an issue when building my application and serving it over IIS via an Asp.Net application. For some reason it tries to retrieve worker.js as an absolute path (/) while it should be relative : it tries to retrieve http://server-name/hash.worker.js instead of http://server-name/application-name/hash.worker.js

/3bc5b590ef81019703f0.worker.js
Failed to load resource: the server responded with a status of 404 (Not Found)

Note : when building I get this structure :

wwwroot
| - [hash].worker.js
| - static
    | - js
        | - 0.[hash].js
        | - app.[hash].js
        | - manifest.[hash].js
        | - vendor.[hash].js

It seems like worker.js is almost equivalent to 0.js (almost the same size for the .js, .js.gz and .js.map, just slighly lighter for the 0.js files). But including it won't change anything, it still doesn't work.

EDIT : I guess this is a webpack issue, but I don't understand why it is served under the "publicPath" repository and not the usual directory used by everything else. The actual question is : Why is worker.js generated under the public path rather than the dist path ? And why is it not integrated in the vendor.js bundle ?

[FranckFreiburger]

At first glance I cannot explain why the worker goes in publicPath. Maybe you can have a look at https://github.com/mozilla/pdfjs-dist/blob/master/webpack.js since vue-pdf use it

[FranckFreiburger]

feel free to reopen if the issue still persists

[tsauvajon]

The issue still persists for me, but I've worked it around by changing my public path from / (absolute) to ./ (relative) in production.

[FranckFreiburger]

Why is worker.js generated under the public path rather than the dist path ? And why is it not integrated in the vendor.js bundle ?

The pdf worker is processed by worker-loader whose default output is publicPath (see https://github.com/webpack-contrib/worker-loader#publicpath)

[rodrigorodriguescosta]

Same issue here, I'm using vue-cli Webpack, how did you fix it? I tried your solution @tsauvajon but it didn't work !

I apreciate your help!

[tsauvajon]

@rodrigorodriguescosta My problem was that it tried to get my worker at http://server-name/hash.worker.js instead of http://server-name/application-name/hash.worker.js.

I've changed my webpack configuration (with the vue webpack template, it is located in config/index.js), and set my publicPath to ./ instead of / to use a relative rather than absolute path. I had no problem in my local development environment, so I changed only the build.assetsPublicPath. If you have the same issue in local development, change dev.assetsPublicPath aswell.

[rodrigorodriguescosta]

Thank you, it worked here without change publicPath, I download again vue-cli and it worked! I don't know why! hahahaha, but it's working on both enviroment!

[leo0828]

I have the same issue I tried all solutions ,but not worked,I want to package the work.js file in static/js,have you any idea?thanks a lot. @FranckFreiburger

[jchaos]

edit webpack.config.js

module.exports = {
    output: {
        publicPath: '/add_your_abusolute_path/'
    }
}

[ram33]

@tsauvajon Thanks for your workaround. I am having the same problem. But we host scripts in different domain (CDN server). So changing path to relative wont work. Any other way to fix this?

[FranckFreiburger]

worker-loader publicPath Type: String Default: null

Overrides the path from which worker scripts are downloaded. If not specified, the same public path used for other webpack assets is used.

// webpack.config.js
{
  loader: 'worker-loader'
  options: { publicPath: '/scripts/workers/' }
}

then try to hack this line: https://github.com/FranckFreiburger/vue-pdf/blob/fb274cbb81956d8c39f6febb67a2c11b72b1324d/src/vuePdfNoSss.vue#L13

[fdlk]

Caused by #144

[xuqihua]

I fixed it like this import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.js'; webpack.config module : { rules: [ { test: /\.worker\.js$/, use : { loader : 'worker-loader', options: {inline: true, fallback: false} }, } ] }

[dearvn]

I have the same issue, after 1day investigate I fix as: In html file insert code: Code in laravel template: <base href="{{ url('/') }}">

[navjotcheema97]

@FranckFreiburger

worker-loader publicPath Type: String Default: null Overrides the path from which worker scripts are downloaded. If not specified, the same public path used for other webpack assets is used.

// webpack.config.js
{
  loader: 'worker-loader'
  options: { publicPath: '/scripts/workers/' }
}

then try to hack this line:

https://github.com/FranckFreiburger/vue-pdf/blob/fb274cbb81956d8c39f6febb67a2c11b72b1324d/src/vuePdfNoSss.vue#L13

@FranckFreiburger How can we hack the import line, Couldn't understand it. I am also facing the same cross origin issue.

[J-George]

This is what I did to make it work from my end. My issue was that I didn't want the worker.js file that was created to end up in the public folder, instead in public/js and as @fdlk mentioned, that wont work by trying to explicitly set the path. FYI. My setup is Laravel with Vue, so hoping to help those with that set up.

• In the file that you are calling in vue-pdf, adjust it to show import pdf from 'vue-pdf/src/vuePdfNoSssNoWorker.vue';
• If you build again, you should get an app.worker.js file in your public/js folder
• copy over the contents from your auto generated worker file into this one, and it should work normally