Component is not processed by Webpack ( Unexpected token < )

Question

Component is not processed by Webpack ( Unexpected token < )

betacar opened this issue 7 years ago · comments

Carlos Betancourt Carrero commented 7 years ago

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?

Franck Freiburger commented 6 years ago

weird

Franck Freiburger · Answer 1 · Sun Aug 06 2017 17:30:02 GMT+0800 (China Standard Time)

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

Carlos Betancourt Carrero · Answer 2 · Mon Aug 07 2017 01:41:15 GMT+0800 (China Standard Time)

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?

Franck Freiburger · Answer 3 · Mon Aug 07 2017 02:49:38 GMT+0800 (China Standard Time)

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

Carlos Betancourt Carrero · Answer 4 · Mon Aug 07 2017 03:22:33 GMT+0800 (China Standard Time)

Thank you @FranckFreiburger!

Franck Freiburger · Answer 5 · Mon Aug 07 2017 03:24:36 GMT+0800 (China Standard Time)

btw, which ssr framework do you use ?

Carlos Betancourt Carrero · Answer 6 · Mon Aug 07 2017 03:26:21 GMT+0800 (China Standard Time)

I'm using Nuxt 1.0.0-alpha.4.

Gaurav Koley · Answer 7 · Sun Sep 03 2017 05:58:32 GMT+0800 (China Standard Time)

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

Franck Freiburger · Answer 8 · Mon Nov 06 2017 15:55:27 GMT+0800 (China Standard Time)

please check with v2.x

Bart Vosman · Answer 9 · Mon Nov 27 2017 23:22:09 GMT+0800 (China Standard Time)

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 :)

Franck Freiburger · Answer 10 · Thu Jan 04 2018 18:42:41 GMT+0800 (China Standard Time)

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

dougiefresh49 · Answer 11 · Mon Jan 15 2018 14:52:03 GMT+0800 (China Standard Time)

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

Dhaval Trivedi · Answer 12 · Wed Mar 14 2018 18:30:11 GMT+0800 (China Standard Time)

@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.

Dhaval Trivedi · Answer 13 · Wed Mar 14 2018 19:35:40 GMT+0800 (China Standard Time)

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

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

Franck Freiburger · Answer 14 · Wed Mar 14 2018 19:45:00 GMT+0800 (China Standard Time)

Please give me your error message

Dhaval Trivedi · Answer 15 · Wed Mar 14 2018 19:51:11 GMT+0800 (China Standard Time)

/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)

Dhaval Trivedi · Answer 16 · Wed Mar 14 2018 20:03:28 GMT+0800 (China Standard Time)

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

janhox · Answer 17 · Mon May 14 2018 15:08:30 GMT+0800 (China Standard Time)

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)

Daniel Aguilar · Answer 18 · Sun May 27 2018 10:34:10 GMT+0800 (China Standard Time)

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

Jonas Munck · Answer 19 · Wed Jul 11 2018 03:45:40 GMT+0800 (China Standard Time)

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

Mathieu TUDISCO · Answer 20 · Fri Jul 13 2018 17:56:48 GMT+0800 (China Standard Time)

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

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

Matteo Cominetti · Answer 21 · Fri Aug 31 2018 18:05:15 GMT+0800 (China Standard Time)

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

Bruno Lambert · Answer 22 · Fri Nov 30 2018 21:51:24 GMT+0800 (China Standard Time)

@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 · Answer 23 · Wed Jan 02 2019 15:00:02 GMT+0800 (China Standard Time)

any solution to the problem? Facing the same issue

Franck Freiburger · Answer 24 · Thu Jan 03 2019 01:13:47 GMT+0800 (China Standard Time)

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

fred · Answer 25 · Thu Jan 17 2019 18:35:24 GMT+0800 (China Standard Time)

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' }

Franck Freiburger · Answer 26 · Tue Jan 29 2019 16:58:05 GMT+0800 (China Standard Time)

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

Franck Freiburger · Answer 27 · Tue Jan 29 2019 18:08:11 GMT+0800 (China Standard Time)

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-

Andy · Answer 28 · Mon Feb 04 2019 11:34:45 GMT+0800 (China Standard Time)

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?

Felipe Lube de Bragança · Answer 29 · Fri Apr 12 2019 22:12:23 GMT+0800 (China Standard Time)

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 · Answer 30 · Thu Apr 25 2019 18:00:31 GMT+0800 (China Standard Time)

遇到同样的问题

Nassan Paul · Answer 31 · Wed May 08 2019 14:34:35 GMT+0800 (China Standard Time)

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.

Aluísio Augusto Silva Gonçalves · Answer 32 · Fri Jun 28 2019 09:26:39 GMT+0800 (China Standard Time)

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

Zorro · Answer 33 · Tue Aug 13 2019 17:40:35 GMT+0800 (China Standard Time)

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

fred · Answer 34 · Mon Sep 09 2019 02:34:30 GMT+0800 (China Standard Time)

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

Maciej · Answer 35 · Wed Dec 11 2019 20:47:57 GMT+0800 (China Standard Time)

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>

Yasir · Answer 36 · Fri Dec 13 2019 06:43:21 GMT+0800 (China Standard Time)

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

Joel Van Patten · Answer 37 · Fri Jun 10 2022 01:32:30 GMT+0800 (China Standard Time)

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 · Answer 38 · Mon Dec 26 2022 14:12:16 GMT+0800 (China Standard Time)

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.