Laravel-mix: Fails to babelify arrow syntax on npm run production

Created on 7 Feb 2017  路  7Comments  路  Source: JeffreyWay/laravel-mix

I just tried out Laravel mix and found that it would compile without errors with npm run dev. However, when I attempted to run npm run production, it failed on some arrow syntax in a .js file.

export function addRecords (records, newRecords, type) {
  if (!newRecords) {
    return
  }

  newRecords.forEach(newRecord => {
    addRecord(records, newRecord, type)
  })
}

And the error below refers to the newRecords.forEach(newRecord => { line above:

> node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
 95% emitting
 ERROR  Failed to compile with 1 errors

 error

/js/app.a25a2e810095631e31db.js from UglifyJs
SyntaxError: Unexpected token: operator (>) [./resources/assets/js/vuex/helpers.js:6,21][/js/app.a25a2e810095631e31db.js:5690,32]

Sorry but failing on ES2015 arrow syntax is a bit of a deal breaker here.

Most helpful comment

Yep. You're using a custom .babelrc file that doesn't specify ES2015 compilation. And now you're wondering why you're not getting ES2015 compilation. :)

{
    "presets": [
        ["es2015", { "modules": false }],
    ],
    "plugins": [
        "transform-object-rest-spread"
    ]
}

All 7 comments

  • What version of Node and NPM do you have installed?
  • Are you using a custom .babelrc file in your project root?

node 7.5.0
npm 3.8.6

The only custom thing was to add the babel support for ... spread operator mentioned in https://github.com/JeffreyWay/laravel-mix/issues/76#issuecomment-271920174

My app.js file has the spread operator:

import App from './components/App.vue'

const app = new Vue({
  router, 
  store,
  ...App
}).$mount('#app')

What does your .babelrc file look like?

{
  "plugins": ["transform-object-rest-spread"]
}

Probably need more, hey?

Yep. You're using a custom .babelrc file that doesn't specify ES2015 compilation. And now you're wondering why you're not getting ES2015 compilation. :)

{
    "presets": [
        ["es2015", { "modules": false }],
    ],
    "plugins": [
        "transform-object-rest-spread"
    ]
}

Doh! Thanks for the assist!

Another note, including sourceMaps() in your webpack.mix.js file will double your production JS file output. I was getting 5MB with npm run dev and 1.8MB with npm run production. Once I removed the sourceMaps() call, everything went back to the same 662KB size produced by laravel elixir.

Totally looking forward to using code splitting as well. Thanks @JeffreyWay

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dtheb picture dtheb  路  3Comments

jpmurray picture jpmurray  路  3Comments

mstralka picture mstralka  路  3Comments

rderimay picture rderimay  路  3Comments

wendt88 picture wendt88  路  3Comments