Unable to read vue file on reload

Question

I am using vue-pdf along with vue-server-renderer. While browsing the page internally, it works fine but on reload, webpack is unable to read .vue file in vue-pdf module.

vue-pdf/src/vuePdfNoSss.vue:1
(function (exports, require, module, __filename, __dirname) { <style src="./annotationLayer.css"></style>
                                                              ^

SyntaxError: Unexpected token <
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:599:28)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
    at Function._load (/Users/aditya/rentomojo/node_module

Webpack config

rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
  },

EDIT:

Steps to reproduce:

1. Clone the repo.
2. npm install --save vue-pdf
3. Include it in any component.
4. Directly navigate to the route and it throws the error.

Answer 1

Your problem is that vue-pdf is not processed by vue-loader

According to the official documentation of this library, there are an open bug for this exact behavior:

Component is not processed by Webpack #13

with your exact error. You can check it in: https://github.com/FranckFreiburger/vue-pdf/issues/13

You should either help to solve it or wait until it's solved.

Meanwhile you can try:

• updating to v2 version of vue-pdf (it seems to work fine)

• check if you are rendering the pdf with only numbers (according to the documentation, with ONLY numbers it breaks).

Alternative

Since you have webpack, you might be better off installing pdfjs-dist into node modules (see pdfjs-dist), and removing it from where you have it now.

npm install pdfjs-dist

If you do this, the import is more 'standard',

import { PDFJS } from 'pdfjs-dist'

And try if this works fine.

(extracted from here: Vue: use a custom libary (pdf.js) in a component)

Hope it helps or at least you have a point of reference.