ERROR in build.js from UglifyJs Unexpected token: punc (,)

[microwavesafe]

I'm getting this error when I run npm run build

ERROR in build.js from UglifyJs Unexpected token: punc (,) [./node_modules/vue-timers/index.js:8,24][build.js:93235,29]

If I take out the vue-timers from main.js and my components, then it compiles fine. Any idea how to fix this?

My webpack config is

var path = require('path')
var webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          },
          // other vue-loader options go here
          transformToRequire: {
            'img': 'src',
            'image': 'xlink:href',
            'b-img': 'src',
            'b-img-lazy': ['src', 'blank-src'],
            'b-card': 'img-src',
            'b-card-img': 'img-src',
            'b-carousel-slide': 'img-src',
            'b-embed': 'src'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules(?![\\/]vue-awesome[\\/])/
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  plugins: [new ExtractTextPlugin("main.css")],
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
else {
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
  ])
}

[Kelin2025]

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

Have you tried this?

[microwavesafe]

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.

[Kelin2025]

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

[microwavesafe]

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.

[Kelin2025]

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)

[microwavesafe]

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.

[Kelin2025]

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

[Kelin2025]

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

[microwavesafe]

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.

[Kelin2025]

Try this way

[microwavesafe]

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

[Kelin2025]

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

[Kandy-Hamisi]

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] "