Webpack: Error from UglifyJs SyntaxError: Unexpected token: keyword (default)

[kkomelin]

We are trying to investigate why we are receiving the following error after importing vuejs-datepicker component into the clean vuejs webpack template:

ERROR in static/js/vendor.9868ef83011ecc7ffbea.js from UglifyJs
SyntaxError: Unexpected token: keyword (default) [./~/vuejs-datepicker/src/utils/DateLanguages.js:1,0]

Our test sequence:
1) Create a new project https://github.com/vuejs-templates/webpack and install all dependencies:

vue init webpack my-project
cd my-project
npm install

2) Import and include vuejs-datepicker into the App component.

npm install --save vuejs-datepicker

Then add the line to the js section of App.vue:

  import Datepicker from 'vuejs-datepicker'

After that add the following into the <template> section:

<datepicker></datepicker>

3) Then build the app through the console:

npm run build

And you should notice the error in the console:

ERROR in static/js/vendor.9868ef83011ecc7ffbea.js from UglifyJs
SyntaxError: Unexpected token: keyword (default) [./~/vuejs-datepicker/src/utils/DateLanguages.js:1,0]

@charliekassel explained here the desirable behavior:

I don't really understand why this is an error as the files should be transformed to ES5 by babel before it gets to uglify.

Could you please advise us where to look for the bug?

Thank you so much,
Konstantin

[yyx990803]

Likely because of this: https://github.com/vuejs-templates/webpack/blob/dist/template/build/webpack.base.conf.js#L53 which makes babel-loader skips anything from node_modules.

You can try adding vue-datepicker to the include array so that it's "whitelisted" to babel-loader.

[kkomelin]

Thank you @yyx990803 for your piece of advice.
However, it does not look like a plug&play approach if we should hardcode paths of third-party components in our webpack config every time. I want to believe that we can find a better way.

[yyx990803]

@kkomelin this is because most npm modules export pre-compiled JS, but vue-datepicker is exporting raw *.vue files. If we apply babel to every npm module it will be hugely inefficient, so it's not something the template itself can accommodate for.

[kkomelin]

@yyx990803 This is the key. Then we should simply pre-compile vuejs-datepicker code and solve the problem. Hopefully. it is possible. I will discuss it with the maintainer of vuejs-datepicker.
Thank you very much for your help!

[kkomelin]

@yyx990803 Thanks for your advice. I think we can close the issue.