UglifyJs Unexpected token punc «(», expected punc «:»

philliperosario

Using Lazy Loading:

// sections from /src/router.js
function load (component) {
  // '@' is aliased to src/components
  return () => System.import(`@/${component}.vue`)
}

And:

quasar build

Trigger the following error:

ERROR in js/0.aab963007f1783dc01dc.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/0.aab963007f1783dc01dc.js:36,13]

ERROR in js/1.7861e04c92edd3414bc7.js from UglifyJs
Unexpected token punc «(», expected punc «:» [js/1.7861e04c92edd3414bc7.js:36,13]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! quasar-app@0.0.1 build: `node build/script.build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the quasar-app@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\phill\AppData\Roaming\npm-cache\_logs\2017-09-15T22_41_13_964Z-debug.log

However, if I remove the ${…} ,

// sections from /src/router.js
function load (component) {
  // '@' is aliased to src/components
  return () => System.import(`@/foo.vue`)
}

no error is displayed!

$ npm list --depth=0
quasar-app@0.0.1 C:\Users\phill\Desktop\plenario\quasar
+-- autoprefixer@6.7.7
+-- axios@0.16.2
+-- babel-core@6.26.0
+-- babel-eslint@7.2.3
+-- babel-loader@7.1.2
+-- babel-plugin-transform-es2015-shorthand-properties@6.24.1
+-- babel-plugin-transform-runtime@6.23.0
+-- babel-preset-es2015@6.24.1
+-- babel-preset-stage-2@6.24.1
+-- babel-runtime@6.26.0
+-- UNMET PEER DEPENDENCY bulma@>=0.2
+-- colors@1.1.2
+-- connect-history-api-fallback@1.3.0
+-- css-loader@0.28.7
+-- es6-promise@4.1.1
+-- eslint@4.6.1
+-- eslint-config-standard@10.2.1
+-- eslint-friendly-formatter@3.0.0
+-- eslint-loader@1.9.0
+-- eslint-plugin-html@3.2.1
+-- eslint-plugin-import@2.7.0
+-- eslint-plugin-node@5.1.1
+-- eslint-plugin-promise@3.5.0
+-- eslint-plugin-standard@3.0.1
+-- eventsource-polyfill@0.9.6
+-- express@4.15.4
+-- extract-text-webpack-plugin@3.0.0
+-- file-loader@0.11.2
+-- friendly-errors-webpack-plugin@1.6.1
+-- glob@7.1.2
+-- html-webpack-plugin@2.30.1
+-- http-proxy-middleware@0.17.4
+-- json-loader@0.5.7
+-- laravel-echo@1.3.2
+-- less@2.7.2
+-- less-loader@4.0.5
+-- moment@2.18.1
+-- opn@5.1.0
+-- optimize-css-assets-webpack-plugin@3.2.0
+-- postcss-loader@1.3.3
+-- progress-bar-webpack-plugin@1.10.0
+-- purify-css@1.2.6
+-- pusher-js@4.1.0
+-- quasar-extras@0.0.8
+-- quasar-framework@0.14.3
+-- shelljs@0.7.8
+-- stylus@0.54.5
+-- stylus-loader@3.0.1
+-- url-loader@0.5.9
+-- vue@2.3.4
+-- vue-bulma-datepicker@1.3.6
+-- vue-loader@12.2.2
+-- vue-router@2.7.0
+-- vue-select@2.2.0
+-- vue-style-loader@3.0.3
+-- vue-template-compiler@2.3.4
+-- vuex@2.4.0
+-- vuex-persistedstate@2.0.0
+-- vuex-router-sync@4.3.1
+-- webpack@3.6.0
+-- webpack-dev-middleware@1.12.0
+-- webpack-hot-middleware@2.19.1
`-- webpack-merge@4.1.0

npm ERR! peer dep missing: bulma@>=0.2, required by vue-bulma-datepicker@1.3.6

$ npm list --depth=0 -g
C:\Users\phill\AppData\Roaming\npm
+-- bower@1.8.0
+-- cordova@7.0.1
+-- electron@1.4.15
+-- grunt-cli@1.2.0
+-- gulp@3.9.1
+-- UNMET PEER DEPENDENCY less@^2.3.1
+-- less-loader@4.0.5
+-- npm@5.3.0
+-- quasar-cli@0.6.4
+-- vue-cli@2.8.1
+-- vue-router@2.2.1
+-- vuex@2.1.2
`-- UNMET PEER DEPENDENCY webpack@^2.0.0 || ^3.0.0

npm ERR! peer dep missing: less@^2.3.1, required by less-loader@4.0.5
npm ERR! peer dep missing: webpack@^2.0.0 || ^3.0.0, required by less-loader@4.0.5
npm ERR! invalid: node-gyp@3.4.0 C:\Users\phill\AppData\Roaming\npm\node_modules\cordova\node_modules\npm\node_modules\node-gyp
npm ERR! missing: path-array@^1.0.0, required by node-gyp@3.4.0

danielo515

That’s a transpilation problem. Uglyfy doors not understand ES6, so it should be rather a lack of transpilation or an error during it

philliperosario

@danielo515 do you have any idea how I can solve this? Could you tell me another compressor that is widely used by the community? Thanks.

danielo515

The fact that removing only the template string it works makes me think about a wrong babelrc configuration. Could you post your babel.rc here ?

philliperosario

@danielo515

.babelrc

{
  "presets": [["es2015", {"modules": false}], "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

build/webpack.base.conf.js

var
  path = require('path'),
  webpack = require('webpack'),
  config = require('../config'),
  cssUtils = require('./css-utils'),
  env = require('./env-utils'),
  merge = require('webpack-merge'),
  projectRoot = path.resolve(__dirname, '../'),
  ProgressBarPlugin = require('progress-bar-webpack-plugin'),
  useCssSourceMap =
    (env.dev && config.dev.cssSourceMap) ||
    (env.prod && config.build.productionSourceMap)

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

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: config[env.prod ? 'build' : 'dev'].publicPath,
    filename: 'js/[name].js',
    chunkFilename: 'js/[id].[chunkhash].js'
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: config.aliases
  },
  module: {
    rules: [
      { // eslint
        enforce: 'pre',
        test: /\.(vue|js)$/,
        loader: 'eslint-loader',
        include: projectRoot,
        exclude: /node_modules/,
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          postcss: cssUtils.postcss,
          loaders: merge({js: 'babel-loader'}, cssUtils.styleLoaders({
            sourceMap: useCssSourceMap,
            extract: env.prod
          }))
        }
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': config[env.prod ? 'build' : 'dev'].env,
      'DEV': env.dev,
      'PROD': env.prod,
      '__THEME': '"' + env.platform.theme + '"'
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: env.prod,
      options: {
        context: path.resolve(__dirname, '../src'),
        postcss: cssUtils.postcss
      }
    }),
    new ProgressBarPlugin({
      format: config.progressFormat
    })
  ],
  performance: {
    hints: false
  }
}

config/index.js

var path = require('path')

module.exports = {
  // Webpack aliases
  aliases: {
    quasar: path.resolve(__dirname, '../node_modules/quasar-framework/'),
    src: path.resolve(__dirname, '../src'),
    assets: path.resolve(__dirname, '../src/assets'),
    '@': path.resolve(__dirname, '../src/components'),
    variables: path.resolve(__dirname, '../src/themes/quasar.variables.styl'),
    'vuex-store': path.resolve(__dirname, '../src/store'),
    package: path.resolve(__dirname, '../package.json')
  },

  // Progress Bar Webpack plugin format
  // https://github.com/clessg/progress-bar-webpack-plugin#options
  progressFormat: ' [:bar] ' + ':percent'.bold + ' (:msg)',

  // Default theme to build with ('ios' or 'mat')
  defaultTheme: 'mat',

  build: {
    env: require('./prod.env'),
    publicPath: '/',
    productionSourceMap: false,

    // Remove unused CSS
    // Disable it if it has side-effects for your specific app
    purifyCSS: true
  },
  dev: {
    env: require('./dev.env'),
    cssSourceMap: true,
    // auto open browser or not
    openBrowser: false,
    publicPath: '/',
    port: 8080,

    // If for example you are using Quasar Play
    // to generate a QR code then on each dev (re)compilation
    // you need to avoid clearing out the console, so set this
    // to "false", otherwise you can set it to "true" to always
    // have only the messages regarding your last (re)compilation.
    clearConsoleOnRebuild: false,

    // Proxy your API if using any.
    // Also see /build/script.dev.js and search for "proxy api requests"
    // https://github.com/chimurai/http-proxy-middleware
    proxyTable: {}
  }
}

/*
 * proxyTable example:
 *
   proxyTable: {
      // proxy all requests starting with /api
      '/api': {
        target: 'https://some.address.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
 */

danielo515

@philliperosario I don’t see anything wrong with your configuration, I have exactly the same and it works perfectly for me. Sorry I can’t understand what’s hapening

Dayang

@philliperosario Hello,I have just solved this problem.
You can try to do this：

npm i -D uglifyjs-webpack-plugin
change build/webpack.prod.conf.js

I solved this problem by this method…

steveclarke

This solved a similar problem for me as well. I had a similar error with UglifyJS after adding the latest FeathersJS client.

No More Posting New Topics!

UglifyJs Unexpected token punc «(», expected punc «:»