jecovier / vue-json-excel

MIT License
687 stars 168 forks source link

Unexpected token < #62

Open WangHansen opened 6 years ago

WangHansen commented 6 years ago

When used with Nuxt.js, got 'Unexpected token <'

{ /Users/name/Projects/project/node_modules/vue-json-excel/JsonExcel.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
                                                              ^

SyntaxError: Unexpected token <
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
jecovier commented 6 years ago

Hello, I'm gonna check this out. Never use it inside nuxt I assume it needs a little change (?) thanks for the comment

fjrial commented 6 years ago

The same is happening to me when I use it under Electron/vue (https://github.com/SimulatedGREG/electron-vue

jecovier commented 6 years ago

@WangHansen I could load vue-json-excel into nuxt following the steps describe in this article: https://medium.com/@codebeast_/why-your-third-party-plugin-dont-work-in-nuxt-and-how-to-fix-it-d1a8caadf422 Look for the "Second Attempt: Vue Plugins" part. But when I restart the npm run dev process it throw an "render function or template not defined in component" error. Maybe it's a problem from my installation, could you try this solution?

jecovier commented 6 years ago

@fjrial mmm, I think the problem is that nuxt and electron load the modules with require and this plugin use export... I try to rewrite the code to allow use require but I couldn't run the template

WangHansen commented 6 years ago

@jecovier Sorry about the late reply, was busy these days. It worked from the method in the link you provided, all it needed was ssr: false when use it like describe in here

WangHansen commented 6 years ago

The only problem right now is I get this warning:

[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.
BartekMoment commented 6 years ago

@WangHansen and if the same error occurs in Electron? Do you have any solution for this?

Edit: I found a solution for myself 😉 All you need to do is add a white letter pack in the webpage configuration

In the file: webpack.renderer.config.js

let whiteListedModules = ['vue' , 'vue-json-excel']

And it works 👍

aaaguirrep commented 5 years ago

Hi

I have the same problem when i use the plugin in nuxt project, is there any solutions?

Thanks in advance.

frostspb commented 5 years ago

Me too. In dev and in prod

aaaguirrep commented 5 years ago

Any status about the issue?

frostspb commented 5 years ago

maybe problem with server side rendering in this code

base64ToBlob(data, mime) {
      let base64 = window.btoa(window.unescape(encodeURIComponent(data)));
HiraveBapu commented 5 years ago

i get this error when i run the Unit Test using Jest only. My application is not Nuxt app, its VueJS client side portal. Any suggestions ?

guochangxindeGH commented 4 years ago

@WangHansen,如果在Electron中发生相同的错误?您对此有什么解决方案吗?

编辑: 我为自己找到了解决方案😉 您需要做的就是在网页配置中添加一个白色字母包

在文件中:webpack.renderer.config.js

let whiteListedModules = ['vue' , 'vue-json-excel']

而且有效 👍