Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Component is not processed by Webpack ( Unexpected token < )

See original GitHub issue

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?

Issue Analytics

State:
Created 6 years ago
Reactions:9
Comments:39 (10 by maintainers)

Top GitHub Comments

7reactions

JonasMunckcommented, Jul 10, 2018

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

3reactions

FranckFreiburgercommented, Mar 25, 2019

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: