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



  • 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
    
    


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



  • @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.



  • 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 ?



  • @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': ''
            }
          }
        }
     */
    


  • @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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.