Vue plugin breaks when using UglifyJS Webpack plugin

Been trying to track down a rather annoying little issue and have not had much luck, hoping there may be some insight on how to fix this.

The problem I’m running into is that when running my Webpack dev config, everything runs fine and all the checks in the app work with the given abilities. However, when running through a production build, I found that checking against model instances did not work as it did when running the webpack-dev-server and the dev conf. (However, checking against model names works)

Works in dev + prod builds:

$can('read', 'users')

Works in dev but not in production build:

$can('read', user)

After a lot of troubleshooting, If found that when commenting out the uglify webpack config in webpack.prod.conf.js, everything works again.

Here’s the uglify block in question

{
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap, // evaluates to true
      parallel: true
    }),
    // ... more plugins
  ]
}

I have tried using the exclude option but no luck there. Any idea what might be causing this and how it could be fixed? I know uglifyjs-webpack-plugin is used in a lot of projects, so hoping that this may help someone else as well.

Probably also worth mentioning that I haven’t had any issues with any other dependencies (of which there are a lot, very large project).

[Olena-Stotska]

Do you use ES6 classes (or constructor functions) for your models?

If so, look at https://stalniy.github.io/casl/abilities/2017/07/21/check-abilities.html#instance-checks (there is an Important section below the 2nd paragraph about minification)

[stalniy]

Cool! You are welcome 😃