Use export default instead of module.exports in Vue component example

[jaredcwhite]

I encountered a problem importing new modules within the <script> tag of the example Vue component, and it turned out that module.exports = was the culprit. It looks like vue-loader prefers the export default syntax, as depicted here: https://vue-loader.vuejs.org/en/start/spec.html

Once I made that change in my example file, I was able to add import statements to the top of the <script> tag without a problem.

[Davidzhu001]

what are the differences, if you don't mind to share/

[jaredcwhite]

I believe it's due to a difference between ES6 module syntax and CommonJS syntax. There's a pretty good rundown of the issue here: http://stackoverflow.com/a/40295288/551775

Bottom line: if you're using ES6 import statements to mange your modules (as vue-loader/webpack does), you should use the equivalent ES6 export default statements as well.

[Davidzhu001]

@jaredcwhite It makes a lot sense, thanks so much

[gauravtiwari]

@jaredcwhite Doesn't es6 syntax have issues with webpack uglify plugin? #280

[Davidzhu001]

@gauravtiwari it does, I have to remove webpack uglify plugin from my production.js for a temp solution.
Or we can use webpack uglify plugin the harmony one to instead, it seems not that stable yet.

[jaredcwhite]

Wouldn't uglify operate at the post-compilation stage — aka after all ES6 code has been translated down to browser-friendly ES5? Seems weird that wouldn't work. (I'm talking out of my depth now, I'm pretty new to Rails/Webpack integration.)

[gauravtiwari]

Thanks @jaredcwhite. It seems like babel config issue. @Davidzhu001 Could you take a look at this PR please #291

[gauravtiwari]

Thanks @jaredcwhite

[jaredcwhite]

👍