Template to Mixin Call gets mis-mangled

[joma74]

Version

2.2.4

Reproduction link

joma74/vuejs-one-starter@ddae1b7

Steps to reproduce

npm run build
npm run dist-test

What is expected?

GUI is coming up

What is actually happening?

GUI is not coming up, console displays
TypeError: t.formatZeroPadded is not a function(…)

---

On "npm run build" webpack and it's UglifyPlugin mangles the js files. "npm run dist-test" opens a browser and should display some GUI - but can not by cause of given "TypeError: t.formatZeroPadded is not a function".

The mentioned formatZeroPadded function is a method of a self-written Mixin. formatZeroPadded is used in my App.vue template interpolation <span ... >{{ formatZeroPadded(this.projectsLength) }}.

My conclusion of the cause of this error is that the template interpolation "does not take part" in the mangleing of the js files. Next i will show the js output of the mis-mangled version. The function definition get's mangled to var r=function(t) while the template interpolation still is un-mangled t.i. still formatZeroPadded. See section the formatZeroPadded function call.

Proof 1 - if i keep_fnames in webpack.optimize.UglifyJsPlugin t.i. formatZeroPadded is not mangled and keeps defined as function formatZeroPadded, everything runs fine.

Proof 2 - if i substitute formatZeroPadded with var r in the mis-mangled js file, everything runs fine.

MIS-MANGLED VERSION

the formatZeroPadded function definition

---

function(t,e,n){"use strict";/* harmony export (binding) /
n.d(e,"a",function(){return r});/*

• Left pads the given number with '0'.
• @method formatZeroPadded
• @param {Number} number to format
• @param {Number} [toDigits=2] supports only positive numbers
• @return {String} formatted value
  /
  var r=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;return(Array(e).fill("0").join("") t).slice(-e)}},/ 54 /
  /*/
  function(t,e,n){"use strict";/ harmony import /
  var r=n(53),o={};o[r.a.name]=r.a,/ harmony default export /
  e.a={methods:o}},/ 55 */

the formatZeroPadded function call

---

//
function(t,e,n){var r=n(29)(/ script /
n(52),/ template /
n(79),/ scopeId /
null,/ cssModules /
null);t.exports=r.exports},/ 79 /
//
function(t,e){t.exports={
...
staticStyle:{"vertical-align":"super"}},[t._v(t._s(t.formatZeroPadded(this.projectsLength)))])])])]),t._v(" "),n
...
/***/
function(t,e,n){n(31),t.exports=n(32)}],[81]);

[yyx990803]

This is not a mangling error, but likely because you are using fn.name which is not available/consistent in all browsers, especially after transpilation.

[joma74]

Just as confirmation on Evans' clue, if anyone steps into this.
Changed my UtilsMixin.js from

import * as Formatter from './Formatter';

let allMethods = {
}

allMethods[Formatter.formatZeroPadded.name] = Formatter.formatZeroPadded;

export default {
    methods: allMethods
}

to

import * as Formatter from './Formatter';

export default {
    methods: {
        "formatZeroPadded": Formatter.formatZeroPadded
    }
}

As everything is connected by literal strings and vue/babel/browser resolves that way, turns out my app is working again.

P.S. See http://2ality.com/2015/09/function-names-es6.html#caveat-minification, http://2ality.com/2015/09/function-names-es6.html#suport-for-the-name-property-in-engines for references and finally https://kangax.github.io/compat-table/es6/#function_name_property for the state of that matter.