Component is not processed by Webpack ( Unexpected token < )
betacar opened this issue · comments
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?
It seems that vue-pdf is not processed by vue-loader
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?
This is typically a ssr problem.
Currently, vue-pdf does not support ssr properly, but I am working on a fix.
Thank you @FranckFreiburger!
btw, which ssr framework do you use ?
I'm using Nuxt 1.0.0-alpha.4.
Thread bump. This still doesn't work with vue-SSR.
please check with v2.x
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 :)
seems to be fixed, feel free to reopen if needed.
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'
],
}
...
}
@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.
@FranckFreiburger - I have pushed a reproducible example here. This might help.
Let me know if I can help you with anything else.
Please give me your error message
/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)
weird
Yes, also as mentioned in this comment - it works properly when we just navigate in client side.
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)
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' }
]
},
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 },
],
The same here, even with the no-ssr component:
<no-ssr>
<pdf :src="src"/>
</no-ssr>
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
@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
any solution to the problem? Facing the same issue
for the window is not defined
issue in the worker, please look at #97
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' }
have a look at this thread: nuxt/nuxt#1692 (comment)
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 addvue-pdf
in thewhitelist: []
- check that the
\.js
webpack rule does not exclude thenode_modules/vue-pdf
directory
nuxt:
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?
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)'
}
}
}
遇到同样的问题
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.
I tried vendoring the whole package, rendering client-side only, but still hit this same error.
import pdf from 'vue-pdf/src/vuePdfNoSss '
work for me
still can't manage to make it works with nuxt...
Do someone has a working exemple?
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>
Solve this issue for nuxt.js
👇
#148 (comment)
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",
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.