search

vuejs / vueify

Browserify transform for single-file Vue components
MIT License
1.17k stars 152 forks source link

Error: Parsing file .../src/index.vue: 'import' and 'export' may appear only with 'sourceType: module' #108

Closed bcherny closed 8 years ago

bcherny commented 8 years ago

Isolated repro case here: https://github.com/bcherny/bigo_gym/tree/master/client

Similar to https://github.com/vuejs/vueify/issues/61, but this is a .vue file.

texelate commented 8 years ago

I'm interested in this too as I had this error yesterday. I am admittedly new to ES6, browserfiy and vue so this may be a stupid question: is vueify essentially called on top of babel, that is, does it let you write ES6 as well?

I ended up splitting my gulp build into two: ES6 with babelify and Vue with vueify and then concatenating them after. It works but I wonder whether it's an inefficient way to do my building.

yyx990803 commented 8 years ago

Likely because you are using ES6 syntax, but you did not install babel related packages. https://github.com/vuejs/vueify#usage

texelate commented 8 years ago

@yyx990803 Thanks. I definitely have all the packages installed. If I use import in my entry file I get the error above but my vue files compile fine with import in the script section. Is this expected behaviour? If so, that means I have my gulp file set up correct. I.e. I am compiling my ES6 code and my Vue components in separate tasks.

yyx990803 commented 8 years ago

@texelate vueify picks up babel automatically, but you still need to specify babelify for normal js files.

bcherny commented 8 years ago

@yyx990803 You're right, I missed that. For some reason I thought that vueify handles ES2015 modules already.

If anyone has this issue in the future, run:

npm install babel-core babel-preset-es2015 babel-runtime babel-plugin-transform-runtime --save-dev
texelate commented 8 years ago

@yyx990803 Thanks but does it pick it up in non-.vue files?

For example, if I have foo.js that imports bar.vue and run vueify on foo.js will ES6 code work in foo.js or just bar.vue? The latter is how it's working for me, even after running the npm command @bcherny mentioned.

Thank you.

LinusBorg commented 8 years ago

@texelate As Evan explained, vueify only applies babel to .vue filles

The command @bcherny posted only installs babel, it does not apply it to .js - for that you have to include babelify in you bowserify config.

texelate commented 8 years ago

Thanks @LinusBorg. I wanted clarity because vueify runs on the gulp src of a .js file so just wanted to be 100% sure I understood it correctly that this entry file — and any .js files it requires — are not parsed as ES6.

So, for anyone else reading, if you are wanting to write ES6 throughout your application you will need to use both: vueify and babelify and transpile them separately.