vue-pdf: Component is not processed by Webpack ( Unexpected token < )

When loaded as the following:

<template>
  <pdf v-bind:src="_document" />
</template>

<script>
  import pdf from 'vue-pdf';
  export default {
    components: {
      pdf
    },
    _document: {
      data: "..."
    }
  }
</script>

I get the following error:

[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token <
[vue-router] uncaught error during route navigation:
/Users/betacar/Code/JavaScript/project/node_modules/vue-pdf/src/pdf.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
                                                              ^
SyntaxError: Unexpected token <
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at r (/Users/betacar/Code/JavaScript/project/node_modules/vue-server-renderer/build.js:5812:16)
    at Object.<anonymous> (server-bundle.js:1980:18)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.47 (0.server-bundle.js:35:66)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.44 (0.server-bundle.js:9:3)
    at __webpack_require__ (server-bundle.js:27:30)

Am I missing something?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 9
Comments: 39 (10 by maintainers)

Most upvoted comments

I had this issue today, using the nuxt/pwa template

nuxt version: 1.4.1 vue-pdf: 3.3.1

For me, this worked: (but I get the [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.)

// plugins/vue-pdf.js
import Vue from 'vue'
import pdf from 'vue-pdf'

Vue.component('pdf', pdf)

// nuxt.config.js

plugins: [    
    { src: '~/plugins/vue-pdf.js', ssr: false },
  ],

JonasMunck on Jul 10, 2018

vue-pdf is delivered without bundle (no dist/ directory), then you need to tell your build system (webpack or any other) to include vue-pdf in their compilation process and eventually to transpile vue-pdf.

webpack:

if you are using webpack-node-externals, you must add vue-pdf in the whitelist: []
check that the \.js webpack rule does not exclude the node_modules/vue-pdf directory

nuxt:

transpile: https://nuxtjs.org/api/configuration-build#transpile
extend: https://nuxtjs.org/faq/extend-webpack#how-to-extend-webpack-config-

FranckFreiburger on Mar 25, 2019

This is still happening. And all of the duplicate issues seem to be closed. Is there any help out there to resolve this?

Using webpack (Laravel-mix) and version “vue-pdf”: “^4.3.0”,

joelvanpatten on Jun 9, 2022

This problem still occurs when testing with Jest in my nuxt2 environment as well I’ve tried all of the solutions supposed above but none of them works.

iret-ichihara on Dec 26, 2022

If you use Nuxt this may help:

I created a plugin pdf.js

import Vue from 'vue'
import pdf from 'vue-pdf'
Vue.component('pdf', pdf)

added it to nuxt.config.js

plugins: [
  { src: '~/plugins/pdf.js', mode: 'client' }
]

and in the template:

<client-only>
   <pdf :src="require(`@/assets/your_pdf`)"></pdf>
</client-only>

maciejpi on Dec 11, 2019

import pdf from 'vue-pdf/src/vuePdfNoSss ' work for me

zhouyangit on Aug 13, 2019

Thread bump. This still doesn’t work with vue-SSR.

arkokoley on Sep 2, 2017