ERROR in build.js from UglifyJs Unexpected token: punc (,) about vue-timers HOT 13 CLOSED

Nothing illegal in index.js:8, looks like problem in Uglify 🤔

Have you tried this?

from vue-timers.

I think your right, it is a Uglify bug, but it's hard to pin point. I am using the Vue basic template, so I hoped it would work with Vue based libraries.

Anyway I have added this to the webpack.config.js

      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules(?![\\/]vue-timers[\\/])/
      },

and it seems to compile OK.
I tried adding this as a part of an array to the previous babel exclude, like this.

      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: [/node_modules(?![\\/]vue-awesome[\\/])/, /node_modules(?![\\/]vue-timers[\\/])/]
      },

which according to the docs should work, but this resulted in exactly the same error. Anyway this might help someone else, if they come across the same problem.

from vue-timers.

Looks crazy. I tested it on basic webpack template and everyting was fine 🤔
exclude means that file won't be transpiled with babel and it's not good.

from vue-timers.

First of all, thanks for your help, considering it's not a problem with your component, it is greatly appreciated.

Uglify really isn't giving me much information to begin to track it down, for a new user to webpack / Uglify it makes it very difficult to dig into this myself.

I had to create a .babelrc file to get it to compile the spread operator (which I just find too useful not to have).

{
  "presets": [
    ["env", { "modules": false }]
  ],
  "plugins": [
    "transform-object-rest-spread"
  ]
}

Is it possible that this causing problems? It will take a lot of work to remove all the spread operators in my code to check.

from vue-timers.

I'm not sure it'll help but
Try to open node_modules/vue-timers/index.js and replace 8 line:

-  return Object.assign({ name, time }, options)
+  return Object.assign({ name: name, time: time }, options)

from vue-timers.

That seems to have fixed the error generated from index.js, but now Uglify is throwing up an error with mixin.js. As always the error isn't shedding any light on the problem.

ERROR in build.js from UglifyJs
Unexpected token: punc (() [./node_modules/vue-timers/mixin.js:75,0][build.js:93573,6]

That line looks fine to me.

from vue-timers.

So, try to replace data () { with data: function () {

from vue-timers.

Try to replace mixin.js with code from this commit:
click
If it'll help, I'll publish changes to npm

from vue-timers.

OK so I went through all the function declarations and changed name () { to name: function () { and that cleared up mixin.js.

Now I'm getting errors in utils.js

ERROR in build.js from UglifyJs
Unexpected token: punc ([) [./node_modules/vue-timers/utils.js:12,33][build.js:93658,34]

I'm not sure how to change that line.

from vue-timers.

Try this way

from vue-timers.

We have a winner! I've attached my modified version of your component, in case it is useful. But really I have just implemented your changes.

Out of interest do you know why my Uglify is causing problems, when it is not for others?

Thanks again for your help.

vue-timers.zip

from vue-timers.

I really don't know what is the problem
Looks like you use Uglify that doesn't support ES6 features, but default vue webpack template works correctly for me

from vue-timers.

Nothing illegal in index.js:8, looks like problem in Uglify thinking

Have you tried this?

Hello I am also getting the same uglify error in my react application. I have tried the above fix and it now works perfectly when i run npm run build and serve -s build in my environment. Vercel on the other hand produces this error - static/js/main.cd81754f.js from UglifyJs
SyntaxError: Unexpected token: punc ({) [./~/react-router-dom/umd/react-router-dom.production.min.js:11,866]
"

from vue-timers.