Build issue: UglifyJs - Unexpected token: name (context)

[hellojere]

Jumped back to an older Ruby on Rails project that runs on Blendid, has React baked in, and without doing anything to my own code I started getting the following during the build to production:

gulp-notify: [Error running Gulp] Error:
app-db772911ddfbfa40329a.js from UglifyJs
Unexpected token:
name (context) [app-db772911ddfbfa40329a.js:67035,12]

I even tried a fresh clean install with Blendid, but this has the same issue.

My task-config.js is the following:

module.exports = {
  html: false,
  images: true,
  fonts: true,
  svgSprite: true,
  stylesheets: true,

  browserSync: {
    proxy: 'localhost:3000',
    files: ['app/**/*'],
    snippetOptions: {
      rule: {
        match: /<\/head>/i,
        fn: function(snippet, match) {
          return snippet + match;
        }
      }
    }
  },

  javascripts: {
    publicPath: '/assets/javascripts',
    entry: {
      app: ['./app.js']
    },
    babel: {
      presets: ['react-app']
    },
    provide: {
      $: 'jquery',
      jQuery: 'jquery'
    }
  }
};

And my package.json:

{
  "name": "trp",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@gitlab.com:studiocoucou/the-retail-psychologist.git",
  "author": "Jere Salonen <jere@studiocoucou.com>",
  "license": "MIT",
  "dependencies": {
    "autosize": "^4.0.2",
    "axios": "^0.18.0",
    "babel-cli": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "blendid": "^4.0.1",
    "bourbon": "^5.1.0",
    "datatables.net": "^1.10.19",
    "file-extension": "^4.0.5",
    "imagesloaded": "^4.1.4",
    "jquery-ui": "^1.12.1",
    "js-cookie": "^2.2.0",
    "marked": "^0.5.1",
    "prop-types": "^15.6.2",
    "rails-ujs": "^5.2.1",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-markdown": "^4.0.1",
    "react-player": "^1.6.6",
    "react-s3-uploader": "^4.8.0",
    "react-sortable-hoc": "^0.8.3",
    "reframe.js": "^2.2.3",
    "shortid": "^2.2.13",
    "striptags": "^3.1.1",
    "styled-components": "^3.4.9",
    "turbolinks": "^5.2.0",
    "uglify-js": "3.3.x"
  },
  "devDependencies": {
    "babel-preset-react-app": "^2.2.0"
  }
}

[brianjhanson]

Not a maintainer, but this is most likely because uglify doesn't play nice with ES6. Here's a comment summing up the current state nicely.

I'm not sure there's a good way to give Webpack a new version of uglify though. You could theoretically use the customizeWebpackConfig option in order to remove the old uglify from the plugins array, and add the new one in but that would be a pretty gnarly solution.

[olets]

@hellojere sorry for the delayed response! Did you find a solution to this? It's not clear to me why your custom uglify-js is getting involved since it isn't referenced in the task-config (e.g. in javascripts.production.uglifyJsPlugin). Is it pulled in by react-app?

Thanks for that link @brianjhanson, that's really useful info. Does sound like terser could be worth looking into as a solution to this problem.

While you're at it, getting Blendid up to 4.5.0 should be pretty painless and will give you a lot of dependency updates, which might help too (the updates are mostly for security, but I suppose there's always the chance that that would introduce some new problem)

[krismeister]

This isn't resolved with a 4.5.0 upgrade. It customizeWebpackConfig wont let you override the default uglify.

[jamesmacwhite]

I just hit this on a project that isn't calling anything directly related to uglify in the task config, but happened when I updated an unrelated dependency version semver and I assume something dependant has triggered it. I'm aware blendid is no longer supported, but is there any workaround?

[olets]

Sorry to hear that. To my knowledge no Viget dev ever hit this on our Blendid-based projects, so it's encouraging to hear that it could be related to an interaction with unrelated tools. If it turns out it can be alleviated by a change to Blendid, that would be a very welcome PR! Sounds a like a good place to start is digging into that upgrade's package-lock.json / yarn.lock changes. patch-package is a useful tool for hacking on third party dependencies while experimenting. And if you haven't checked it out already, the link from brianjhanson has a good rundown of uglify+webpack troubles — couple years old but then so is much of Blendid