UglifyJS throws Unexpected token: keyword (const) in build

[JavierPAYTEF]

The full error is:

ERROR in js/app.44949af3ee23bd7.js from UglifyJs
Unexpected token: keyword (const) [./node_modules/vue-timers/utils.js:1,7][js/app.44949af3ee23bd7.js:60908,0]

From what I read it happens because node_modules is ignored by default when building using webpack and babel. I'm not sure if that means that you need to transpile the code before uploading it. I'm still searching but I haven't found a solution yet that allows me to transpile a specific module, my only option is to manually edit the code of vue-timers, which breaks everytime I recreate node_modules.

Check this answer I found for context https://stackoverflow.com/questions/51289261/babel-does-not-transpile-imported-modules-from-node-modules

[masongzhi]

you can modify the webpack.base.conf.js before we decide to transpile vue-timers to es5

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('node_modules/vue-timers')],
      }
    ]
  }

reference: babel/babel-loader#171 (comment)

[Kelin2025]

^ This

[JavierPAYTEF]

Sorry it took me a little while to answer, I had already tested this and it doesn't work, I tried it again just in case. I also attemped to change a lot of other thigns but I don't event know where node_modules is being ignored, maybe from another configuration file. I also don't use the "exclude" variable, I'm assuming node_modules is being excluded on one of the babel presets or something like that.

The only thing that allows me to compile is manually replacing "const" with "var" in utils.js

I understand that maybe I'm doing something wrong with the configuration but this is the only module that's throwing a compile error for me, which seems weird.

This is my webpack.base.conf.js in case you want to see it.

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
var fs = require('fs')

const { VueLoaderPlugin } = require('vue-loader')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: ['@babel/polyfill','./src/main.js']
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test'), resolve('node_modules/vue-timers')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/vue-timers')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
          // workaround for vuejs-templates webpack issue 1266
          publicPath: process.env.NODE_ENV === 'production' ? '../' : '/'
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

Also .babelrc looks like this:

{
  "presets": [
    [
      "@babel/env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": false
      }
    ],
    "@babel/plugin-proposal-json-strings"
  ],
  "env": {
    "test": {
      "presets": [
        "@babel/env"
      ],
      "plugins": [
        "istanbul",
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ],
        "@babel/plugin-proposal-function-sent",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-throw-expressions",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        [
          "@babel/plugin-proposal-class-properties",
          {
            "loose": false
          }
        ],
        "@babel/plugin-proposal-json-strings"
      ]
    }
  }
}

[rbanks54]

@JavierPAYTEF I also had trouble with this.

I even got to the point of checking if I had my babel exclude regex wrong by adding an exclude function like the following:

      {
        test: /\.js$/,
        loader: 'babel-loader',
        //We need to transpile vue-timers from node_modules. We don't want to exclude it
        exclude: file => {
          const exclude = /node_modules/.test(file) &&
          !/.*vue-timers.*/.test(file) &&
          !/\.vue\.js/.test(file)

          if (/.*vue-timers.*/.test(file)) console.log(`${file} is ${exclude ? 'excluded' : 'included'}`)
          return exclude
      }

It showed the vue-timers files were included (or, at least, not excluded by the regex), but Uglify was still complaining. I also tried adding a specific include condition, just in case, and that only ended up breaking other things. 🤦‍♂️

I ended up just copying the mixin code over to my main src folder as-is, reverted to ignoring all of node_modules completely, and now everything now works as expected. 🙌

Yes, I'll need to keep out for any future releases, but the approach works and I'm no longer banging my head on a table trying to diagnose whatever webpack 4, babel and uglify are doing that's causing me grief.

[JavierPAYTEF]

@rbanks54 Thanks for the input, the same happened to me. I think the issue is that the code needs to be converted to es5 by babel before it goes through UglifyJS. If Uglify gets code that is not es5 it complains.

I get the author doesn't want to transpile this to es5, it's their library after all and I'm just borrowing the code, but taking a step back it's weird to be having to put specific rules and exemptions in the webpack configuration just to make this work. All the other libraries just work.

I'm sad I wasted so many hours trying to fix this and will have to waste more to replace this library in the end. The only thing I learned from this is that webpack configuration is a nightmare.

[masongzhi]

@JavierPAYTEF @rbanks54 it has been resolve on version 2.0.0 now