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.
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
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. :)