Component is not processed by Webpack ( Unexpected token < ) #13

betacar · 2017-08-05T18:59:18Z

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?

The text was updated successfully, but these errors were encountered:

FranckFreiburger · 2017-08-06T09:30:02Z

It seems that vue-pdf is not processed by vue-loader

betacar · 2017-08-06T17:41:15Z

So, I discovered that if I navigate from any Vue to page to the PDF one, the error is not displayed. But, if I request the page from the server (ie. copy the URL and open a new tab for it, or just refreshing the page), the error is displayed.

Does it support SSR?

FranckFreiburger · 2017-08-06T18:49:38Z

This is typically a ssr problem.
Currently, vue-pdf does not support ssr properly, but I am working on a fix.

betacar · 2017-08-06T19:22:33Z

Thank you @FranckFreiburger!

FranckFreiburger · 2017-08-06T19:24:36Z

btw, which ssr framework do you use ?

betacar · 2017-08-06T19:26:21Z

I'm using Nuxt 1.0.0-alpha.4.

arkokoley · 2017-09-02T21:58:32Z

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

FranckFreiburger · 2017-11-06T07:55:27Z

please check with v2.x

bartvosman · 2017-11-27T15:22:09Z

I've tried with v2 but still getting the same issue.

Versions:
Nuxt 1.0.0-RC11
vue-pdf 2.0.3

EDIT:
I've got it working now. The problem in my case was that my selector only contained numbers. When I changed it to phrases it worked :)

FranckFreiburger · 2018-01-04T10:42:41Z

seems to be fixed, feel free to reopen if needed.

dougiefresh49 · 2018-01-15T06:52:03Z

i am getting almost the exact same error and cannot figure out how to resolve (I am new to Vue so im sure it something simple i have missed).

I have tried a few things (listed below) based on the Vue documentation but still stuck.

Please advise on how to proceed, thanks!.

Versions:

"nuxt": "1.0.0-rc11",
"vue-pdf": "^3.1.2"

Attempt 1

in plugins/vue-pdf.js

import pdf from 'vue-pdf'
export default pdf

in nuxt.config.js

module.exports = {
...
  build: {
    vendor: [
      'axios',
      'vue-pdf'
    ],
  }
}

Attempt 2

in plugins/vue-pdf.js

import Vue from 'vue'
import pdf from 'vue-pdf'

Vue.use(pdf)
export default pdf

in nuxt.config.js

module.exports = {
...
  plugins: [
    '~/plugins/vue-pdf.js'
  ],
  build: {
    vendor: [
      'axios',
      'vue-pdf'
    ],
  }
...
}

geekguy · 2018-03-14T10:30:11Z

@FranckFreiburger - this issue is still there.

We are using this project's implementation for ssr.

I Guess, vue-pdf is not processed by vue-loader.

geekguy · 2018-03-14T11:35:40Z

@FranckFreiburger - I have pushed a reproducible example here. This might help.

Let me know if I can help you with anything else.

FranckFreiburger · 2018-03-14T11:45:00Z

Please give me your error message

geekguy · 2018-03-14T11:51:11Z

/tmp/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 Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at r (/tmp/vue-hackernews-2.0/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.module.exports._vm (webpack:/external "vue-pdf":1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 6ab839af0a5ef4b15b6c:25:0)
    at Object.module.exports.module.exports.list (server-bundle.js:106:66)
    at __webpack_require__ (webpack:/webpack/bootstrap 6ab839af0a5ef4b15b6c:25:0)
    at Object.<anonymous> (server-bundle.js:778:137)
    at __webpack_require__ (webpack:/webpack/bootstrap 6ab839af0a5ef4b15b6c:25:0)

FranckFreiburger · 2018-03-14T11:53:55Z

weird

geekguy · 2018-03-14T12:03:28Z

Yes, also as mentioned in this comment - it works properly when we just navigate in client side.

janhox · 2018-05-14T07:08:30Z

Is there any update on this ?

Also, how do I make it work navigating on client side ?
I am using as a plugin defined as ssr false in nuxt.config. But getting the error no matter how I access the component.

/node_modules/vue-pdf/src/vuePdfNoSss.vue:1
(function (exports, require, module, __filename, __dirname) { <style src="./annotationLayer.css"></style> ^
SyntaxError: Unexpected token <
at new Script (vm.js:51:7)
at createScript (vm.js:138:10)

spk27 · 2018-05-27T02:34:10Z

same here

Error:

You may need an appropriate loader to handle this file type.
| <style src="./annotationLayer.css"></style>
| <script>
| 
 @ ./ClientApp/app.js 42:14-32
 @ ./ClientApp/boot-app.js
 @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot-app.js

my module rules on webpack:

    module: {
      rules: [
        { test: /\.vue$/, include: /ClientApp/, exclude: /node_modules/, use: 'vue-loader' },
        { test: /\.(js|jsx)$/, include: /ClientApp/, exclude: /node_modules/, use: 'babel-loader' },
        { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
        { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
      ]
    },

JonasMunck · 2018-07-10T19:45:40Z

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

mathieutu · 2018-07-13T09:56:48Z

The same here, even with the no-ssr component:

<no-ssr>
     <pdf :src="src"/>
</no-ssr>

teocomi · 2018-08-31T10:05:15Z

Same issue here

in ./node_modules/vue-pdf/src/vuePdfNoSss.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <style src="./annotationLayer.css"></style>
| <script>
| 
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./ClientApp/components/app-root.vue?vue&type=script&lang=js& 53:14-32
 @ ./ClientApp/components/app-root.vue?vue&type=script&lang=js&
 @ ./ClientApp/components/app-root.vue
 @ ./ClientApp/app.js
 @ ./ClientApp/boot-app.js
 @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true babel-polyfill ./ClientApp/boot-app.js

BrunoLambert · 2018-11-30T13:51:24Z

@JonasMunck I did what you suggested. It doesn't display the error on the screen anymore, but it shows a white block on my page and 2 errors on console:

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

, or missing . Bailing hydration and performing full client-side render.

-> Uncaught ReferenceError: window is not defined

Bobur-kobilov · 2019-01-02T07:00:02Z

any solution to the problem? Facing the same issue

FranckFreiburger · 2019-01-02T17:13:47Z

for the window is not defined issue in the worker, please look at #97

frederic117 · 2019-01-17T10:35:24Z

got exactly the same problem :(
nuxt:render Rendering url / +0ms
{ C:\Users\frede\Documents\Dev\mydz\node_modules\vue-pdf\src\vuePdfNoSss.vue:1
(function (exports, require, module, __filename, __dirname) { <style src="./annotationLayer.css"></style>
^

SyntaxError: Unexpected token <
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at r (C:\Users\frede\Documents\Dev\mydz\node_modules\vue-server-renderer\build.js:8341:16)
at Object.module.exports.render (server-bundle.js:48208:18)
at webpack_require (webpack:/webpack/bootstrap b49af46d0985ffbedb0f:25:0)
at Object.module.exports.webpack_exports.a.name (client/components/pilot/PayBill.vue?aaeb:1:0)
at webpack_require (webpack:/webpack/bootstrap b49af46d0985ffbedb0f:25:0)
at Object. (client/components/pilot/PayBill.vue:1:0) statusCode: 500, name: 'SyntaxError' }

FranckFreiburger · 2019-01-29T08:58:05Z

have a look at this thread: nuxt/nuxt#1692 (comment)

FranckFreiburger · 2019-01-29T10:08:11Z

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-

ahoebeke · 2019-02-04T03:34:45Z

Tried all recent advice .

Using build.transpile & white-listing for webpack-node-externals, didn't work at all.
Using as a plugin with ssr:false, gives "DOMException: Failed to construct 'Worker': Script.. ..not found".

Any more ideas?

felubra · 2019-04-12T14:12:23Z

Not sure if this helps but using Nuxt I came with the following solution.
PDFFilePreview is a component that uses vue-pdf

In a Nuxt page component:

<no-ssr>
    <PDFFilePreview :fileURL="fileURL"></PDFFilePreview>
</no-ssr>

import PlaceholderComponent from '~/components/viewers/PlaceholderComponent'
export default {

    components: {
        PlaceholderComponent,
        PDFFilePreview: () => {
          if (!process.client) {
            return {
              component: PlaceholderComponent
            }
          } else {
            return {
              component: import('~/components/viewers/PDFFilePreview')
            }
          }
        },
      },

}

In nuxt.config.js:

module.exports = {
build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      config.output.globalObject = '(self || this)'
    }
  }
}

ShawLyon · 2019-04-25T10:00:31Z

遇到同样的问题

nassan · 2019-05-08T06:34:35Z

You can overcome this error by explicitly copying the component and its dependencies into the app. This way it will compile the component just like it compiles all of your other components.

AluisioASG · 2019-06-28T01:26:39Z

I tried vendoring the whole package, rendering client-side only, but still hit this same error.

zhouyangit · 2019-08-13T09:40:35Z

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

frederic117 · 2019-09-08T18:34:30Z

still can't manage to make it works with nuxt...
Do someone has a working exemple?

maciejpi · 2019-12-11T12:47:57Z

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>

mryassera · 2019-12-12T22:43:21Z

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

joelvanpatten · 2022-06-09T17:32:30Z

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",

iret-ichihara · 2022-12-26T06:12:16Z

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.

FranckFreiburger changed the title ~~Component is not processed by Babel~~ Component is not processed by Webpack Aug 6, 2017

FranckFreiburger added the bug label Aug 6, 2017

FranckFreiburger closed this as completed Jan 4, 2018

FranckFreiburger reopened this Mar 14, 2018

billwing mentioned this issue Mar 21, 2018

server bundle compile error vuejs/vue-hackernews-2.0#99

Closed

FranckFreiburger added the help wanted label Mar 21, 2018

This was referenced Jan 29, 2019

Unexpected token #105

Closed

Dependency not found: babel-runtime/regenerator #119

Closed

FranckFreiburger mentioned this issue Jan 29, 2019

Uncaught SyntaxError: Unexpected token < when work with electron-vue #136

Closed

FranckFreiburger pinned this issue Jan 29, 2019

FranckFreiburger changed the title ~~Component is not processed by Webpack~~ Component is not processed by Webpack ( Unexpected token < ) Mar 25, 2019

This was referenced Mar 25, 2019

NUXT with vuetify have "Unexpected token <" error #146

Closed

window is not defined in worker file #97

Open

betacar closed this as completed Dec 12, 2019

FranckFreiburger mentioned this issue Jun 8, 2020

Unexpected token < import pdf from 'vue-pdf'; bundle #206

Closed

iret-ichihara mentioned this issue Dec 26, 2022

Working exemple with Nuxt #148

Open

Component is not processed by Webpack ( Unexpected token < ) #13

Component is not processed by Webpack ( Unexpected token < ) #13

Comments

betacar commented Aug 5, 2017

FranckFreiburger commented Aug 6, 2017

betacar commented Aug 6, 2017 • edited

FranckFreiburger commented Aug 6, 2017

betacar commented Aug 6, 2017

FranckFreiburger commented Aug 6, 2017

betacar commented Aug 6, 2017

arkokoley commented Sep 2, 2017

FranckFreiburger commented Nov 6, 2017

bartvosman commented Nov 27, 2017 • edited

FranckFreiburger commented Jan 4, 2018

dougiefresh49 commented Jan 15, 2018

Attempt 1

Attempt 2

geekguy commented Mar 14, 2018

geekguy commented Mar 14, 2018 • edited

FranckFreiburger commented Mar 14, 2018

geekguy commented Mar 14, 2018

FranckFreiburger commented Mar 14, 2018

geekguy commented Mar 14, 2018

janhox commented May 14, 2018

spk27 commented May 27, 2018

JonasMunck commented Jul 10, 2018

mathieutu commented Jul 13, 2018 • edited

teocomi commented Aug 31, 2018

BrunoLambert commented Nov 30, 2018

Bobur-kobilov commented Jan 2, 2019

FranckFreiburger commented Jan 2, 2019

frederic117 commented Jan 17, 2019

FranckFreiburger commented Jan 29, 2019 • edited

FranckFreiburger commented Jan 29, 2019 • edited

ahoebeke commented Feb 4, 2019

felubra commented Apr 12, 2019 • edited

ShawLyon commented Apr 25, 2019

nassan commented May 8, 2019

AluisioASG commented Jun 28, 2019

zhouyangit commented Aug 13, 2019

frederic117 commented Sep 8, 2019

maciejpi commented Dec 11, 2019 • edited

mryassera commented Dec 12, 2019

joelvanpatten commented Jun 9, 2022

iret-ichihara commented Dec 26, 2022 • edited

betacar commented Aug 6, 2017 •

edited

bartvosman commented Nov 27, 2017 •

edited

geekguy commented Mar 14, 2018 •

edited

mathieutu commented Jul 13, 2018 •

edited

FranckFreiburger commented Jan 29, 2019 •

edited

FranckFreiburger commented Jan 29, 2019 •

edited

felubra commented Apr 12, 2019 •

edited

maciejpi commented Dec 11, 2019 •

edited

iret-ichihara commented Dec 26, 2022 •

edited