Uncaught SyntaxError: Unexpected token import

[NuSkooler]

I'm trying to use your component in an Electron + Vue.js app and get the following error:

Uncaught SyntaxError: Unexpected token import

My main.js:

import TreeView from '@ll931217/vue-treeview'
...
Vue.use(TreeView)

Any ideas?

[ll931217]

I don't think this is an issue with the plugin but with your environment.

[NuSkooler]

Other components are working fine, but their .js seems quite different, e.g.:

head node_modules/sl-vue-tree/src/sl-vue-tree.js                                                                                                                                                          22:57:51

export default {
  name: 'sl-vue-tree',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    edgeSize: {
      type: Number,

[ll931217]

Can you post the full error message?

[NuSkooler]

(Thanks for your quick responses BTW!)

Uncaught SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:606:28)
    at Object.Module._extensions..js (module.js:653:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:504:12)
    at Function.Module._load (module.js:496:3)
    at Module.require (module.js:586:17)
    at require (internal/module.js:11:18)
    at eval (webpack-internal:///@ll931217/vue-treeview:1:18)

[ll931217]

Haha! Not a problem, I am free at the moment and I have GitHub notifications linked to my messenger app, so I can get realtime updates fast.

Seems like the error message doesn't help much. I checked the error message and found this: https://stackoverflow.com/questions/40457660/webpack-uncaught-syntaxerror-unexpected-token-import#40457830. Are you using babel?

This issue talks about babel-loader

[NuSkooler]

I'm using this project that does an awful lot of setup for me, but Babel is being used: https://github.com/SimulatedGREG/electron-vue

[ll931217]

Having a few issues on my side. Can't find axios or my package for some reason

[ll931217]

Can you share your project on github? Maybe I will have better luck in finding the problem

[NuSkooler]

Apologies for the delay especially with you responding so quick - I feel asleep at the wheel :) I don't have this project on GitHub yet as I just started it, practically a empty Electron app. I've used this same Electron + Vue for other applications, but I admit I don't know much about the internals of how webpack / Babel / etc. actually do their thing.

Here is an archive of the project

[ll931217]

Sorry man, I keep running into issues with this template. I downloaded your project and it keeps getting stuck at installing dependencies. The error you are having is very odd too, usually the reason for that problem comes from babel because babel is supposed to help node use ES6 imports/Exports.

[NuSkooler]

@ll931217 Hey thanks for continuing to look into this. I unzipped the archive into a new directory and just did yarn && yarn run dev and the Electron app built OK. Do you have babel or similar tools installed globally?

node v12.3.1, yarn 1.21.1, all other tools are only installed in my sc-edit/node_modules after yarn (or npm install)

[ll931217]

No I don't have Babel installed globally

[ll931217]

Hey! So if there is no more problems, I will be closing this issue. Feel free to reopen if it arises again.

[NuSkooler]

@ll931217 I'm still in this boat without any ideas how to fix it???

[ll931217]

Oops, I thought it has been resolved because you said it built successfully

[NuSkooler]

@ll931217 I just re-read what I wrote before - I can see how it would be interpreted that way. My apologies! What I meant is that I do not see any issues getting stuck with dependencies, etc. I'm able to yarn and yarn run dev and the application comes up. It comes up with errors around the tree as described in the original ticket though. You'll see another tree view in the archive - it does work (but yours seems 100% better which is why I'm here hehe)

[ll931217]

Oh! I feel flattered haha, glad you like it. I created an Ubuntu VM, and looked through the code. It is weird since your template has babel installed. I looked through the other guy's code and it seems that he compiled his code to ES2015, I guess I will have to do the same thing.

[ll931217]

Hey, your issue is a bit hard to fix, it will need to take some time. I was able to reproduce the issue on an Ubuntu VM, however I couldn't figure out how to fix it. The solution I came across is as stated in the previous comment:

I looked through the other guy's code and it seems that he compiled his code to ES2015, I guess I will have to do the same thing.

I had been trying to create my own configs for webpack but it isn't working. Will have to investigate it further whenever I have more time to work on it. If you have any idea how I may be able to fix it, please let me know or if you are able to fix it, please submit a pull request. Thank you for your patience

[NuSkooler]

@ll931217 The webpack stuff is my suspicion as well, but I don't know anything about it. I should have some time to play around with it more soon as well.

[ll931217]

Hey can you provide the other treeview package you tried before which worked? I would like to reference it

[NuSkooler]

@ll931217 apologies for the delay: https://github.com/holiber/sl-vue-tree is the one I have in there now as a placeholder.

[ll931217]

Hey so I have been doing research on bundling packages and found rollup.js, will give it a try and let you know how it goes. Hopefully it goes well, if it goes well, I will be able to bundle it into many different types of formats.

[NMisko]

@NuSkooler Did you see this: https://github.com/SimulatedGREG/electron-vue/issues/284 ? This isn't related to vue-treeview, but I had the same issue with another module. Adding the module to the whitelisted modules fixed it.

@ll931217 On the vue-treeview side, this can apparently be fixed by 'following commonjs2 syntax'. Though I don't know if this applies to you.

third party libraries should avoid distributing code using import / export and should still follow the commonjs2 module syntax.

[ll931217]

@NMisko hey thanks for the suggestion. As mentioned in the previous comment, I did try to convert import/export syntax to commonjs using rollup.js but to no avail. Hopefully whitelisting the package works.

I do plan on converting it to commonjs one day but been really busy with work so no time to work on this. Reason for converting is that people can use the CDN to use this plugin instead of needing to install via mom/yarn

[NuSkooler]

@NMisko @ll931217 Was able to try this tonight as I'm looking to get back to my project. Adding '@ll392217/vue-treeview' to the white list does solve one set of errors, but the act of simply importing still throws a ton of errors starting with: "Component template requires a root element, rather than just text"

[ll931217]

@NuSkooler can you reproduce the error on codesandbox so I can see what's wrong? I feel like that is a very general vuejs V2 error.

[NuSkooler]

@ll931217 For now I had to switch to another component so I could work on my project (Bosket). I'd prefer this component, but I need to get other parts worked on.

I plan on re-doing the groundwork portion of my app soon. I can try tossing it in there when I do so and perhaps get you some more info.

[ll931217]

Just a follow up on this issue, I will convert this plugin to use Vite whenever I have free time. The reason being, it is so much faster than vue-cli and it uses rollup.js out of the box.