Mix not transpiling everything properly

• Laravel Mix Version: 0.9.2
• Node Version (node -v): 7.10
• NPM Version (npm -v): 4.2.0
• OS:

Description:

It seems that some of the code is not being transpiled to es2015, even though most of it does.

Steps To Reproduce:

I am not entirely sure if this is a Mix issue but when i use Babel compiler by itself it compiles the JS code properly.

We use vue-strap (as an example) vue-strap has a file named node_modules/vue-strap/src/utils/utils.js

searching for ‘let’ in that file returns this

node_modules/vue-strap/src/utils/utils.js:32:      let e = {status: request.status}
node_modules/vue-strap/src/utils/utils.js:58:  let inner = document.createElement('p')
node_modules/vue-strap/src/utils/utils.js:62:  let outer = document.createElement('div')
node_modules/vue-strap/src/utils/utils.js:73:  let w1 = inner.offsetWidth
node_modules/vue-strap/src/utils/utils.js:75:  let w2 = inner.offsetWidth
node_modules/vue-strap/src/utils/utils.js:85:  let text = {

When we compile the code i can see that our code that we wrote that uses const OR let is being compiled down to var but the above remains the same in the output.

example:

/***/ }),
/* 11 */,
/* 12 */,
/* 13 */,
/* 14 */,
/* 15 */,
/* 16 */,
/* 17 */,
/* 18 */,
/* 19 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "q", function() { return GET_FORM; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "r", function() { return GET_FORM_FAILED; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return GET_FORM_SUBTOTAL; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return GET_FORM_PRODUCTS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return GET_FORM_PRODUCT_GROUPS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "k", function() { return GET_FIELDS; });
/* unused harmony export SET_FIELD */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "n", function() { return SET_FIELDS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "p", function() { return UPDATE_FIELD; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "s", function() { return SET_ALL_FIELDS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "t", function() { return SET_BUYER_INFO; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "l", function() { return COPY_FROM; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "m", function() { return SET_FORM_FIELDS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "o", function() { return SET_ATTENDEE_FIELDS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return SET_PROMO; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return SET_VISIBLE_PRODUCTS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return SET_VISIBLE_PRODUCT_GROUPS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return MODIFY_VISIBLE_PRODUCTS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return MODIFY_VISIBLE_GROUPS; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "j", function() { return CLEAR_PROMO; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return SET_AFFILIATE; });

/**
* In the .vue files the blow is actually a const
* so it transpiles correctly to var
*/

var GET_FORM = 'GET_FORM';

var GET_FORM_FAILED = 'GET_FORM_FAILED';

var GET_FORM_SUBTOTAL = 'GET_FORM_SUBTOTAL';

var GET_FORM_PRODUCTS = 'GET_FORM_PRODUCTS';

var GET_FORM_PRODUCT_GROUPS = 'GET_FORM_PRODUCT_GROUPS';

var GET_FIELDS = 'GET_FIELDS';

var SET_FIELD = 'SET_FIELD';

var SET_FIELDS = 'SET_FIELDS';

var UPDATE_FIELD = 'UPDATE_FIELD';

var SET_ALL_FIELDS = 'SET_ALL_FIELDS';

var SET_BUYER_INFO = 'SET_BUYER_INFO';

var COPY_FROM = 'COPY_FROM';

var SET_FORM_FIELDS = 'SET_FORM_FIELD';

var SET_ATTENDEE_FIELDS = 'SET_ATTENDEE_FIELDS';

var SET_PROMO = 'SET_PROMO';

var SET_VISIBLE_PRODUCTS = 'SET_VISIBLE_PRODUCTS';

var SET_VISIBLE_PRODUCT_GROUPS = 'SET_VISIBLE_PRODUCT_GROUPS';

var MODIFY_VISIBLE_PRODUCTS = 'MODIFY_VISIBLE_PRODUCTS';

var MODIFY_VISIBLE_GROUPS = 'MODIFY_VISIBLE_GROUPS';

var CLEAR_PROMO = 'CLEAR_PROMO';

var SET_AFFILIATE = 'SET_AFFILIATE';

...
...
...

// but then we have the following code which never got transpiled and still shows let

function getJSON (url) {
  var request = new window.XMLHttpRequest()
  var data = {}
  // p (-simulated- promise)
  var p = {
    then (fn1, fn2) { return p.done(fn1).fail(fn2) },
    catch (fn) { return p.fail(fn) },
    always (fn) { return p.done(fn).fail(fn) }
  };
  ['done', 'fail'].forEach(name => {
    data[name] = []
    p[name] = (fn) => {
      if (fn instanceof Function) data[name].push(fn)
      return p
    }
  })
  p.done(JSON.parse)
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      let e = {status: request.status}// here
      if (request.status === 200) {
        try {
          var response = request.responseText
          for (var i in data.done) {
            var value = data.done[i](response)
            if (value !== undefined) { response = value }
          }
        } catch (err) {
          data.fail.forEach(fail => fail(err))
        }
      } else {
        data.fail.forEach(fail => fail(e))
      }
    }
  }
  request.open('GET', url)
  request.setRequestHeader('Accept', 'application/json')
  request.send()
  return p
}

function getScrollBarWidth () {
  if (document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
    return 0
  }
  let inner = document.createElement('p')// here
  inner.style.width = '100%'
  inner.style.height = '200px'

  let outer = document.createElement('div') // here
  outer.style.position = 'absolute'
  outer.style.top = '0px'
  outer.style.left = '0px'
  outer.style.visibility = 'hidden'
  outer.style.width = '200px'
  outer.style.height = '150px'
  outer.style.overflow = 'hidden'
  outer.appendChild(inner)

  document.body.appendChild(outer)
  let w1 = inner.offsetWidth// here
  outer.style.overflow = 'scroll'
  let w2 = inner.offsetWidth// here
  if (w1 === w2) w2 = outer.clientWidth

  document.body.removeChild(outer)

  return (w1 - w2)
}

We have only several files that this happens with and we have no idea why.

.babelrc looks like this:

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

I’ve already tried asking on slack and gitter, it came down to not being an issue with babel itself since running the babel compiler on the the above JS file actually compiles it to var as well.

i wonder if anyone experienced a similar issue or know what’s causing this behavior?

Thank You.

[larryu]

@VinceG check this https://github.com/JeffreyWay/laravel-mix/issues/631. Might be helpful.

[VinceG]

Like i said i dont need to use utils, it’s just not compiled code to es2015 which does not work on older browsers (safari 9.1 as an example). And it is not getting compiled since it’s inside the node_modules folder and being ignored.

I think we are talking about two different things here.