Laravel-mix: can't compile object spread operator unexpected token error

[jericopulvera]

this code works before when I'm using laravel elixir after I switched I got this error.

error in ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/chat/Chatbox.vue

SyntaxError: Unexpected token (18:2)

16 | components: ['user-list', 'message'],
17 | computed: {

18 | ...mapState({
| ^
19 | chatStore: state => state.chatStore
20 | })
21 | },

[JeffreyWay]

More information please, so I can try to reproduce this.

[kpilard]

You are missing the Object rest spread transform:
https://babeljs.io/docs/plugins/transform-object-rest-spread/

One solution is
npm install --save-dev babel-plugin-transform-object-rest-spread

and than create a .babelrc file in your project directory

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

[JeffreyWay]

Thanks, @kpilard! Closing this now.

[claytonrcarter]

This just caught me, too. @JeffreyWay, will this fix be included in a future release, or will it be a manual fix for a while?

[manogi]

+1 for including this in laravel-mix

[JeffreyWay]

This isn't a bug with Mix, though. It's an experimental Babel feature, and not part of the main ES2015 preset. For anything experimental, you should manually add it to your .babelrc.

[manogi]

@JeffreyWay Thanks for answering. I know and I'm fine with the manual "fix" - but you are maybe going to receive some more requests in this direction, because the object spread operator is mentioned a lot in the Vuex docs and it does save you a lot of lines of code...

Thanks again for your great work!

[mesqueeb]

+1 for adding to Laravel mix because of Vuex! : D

[villers]

+1 for adding to Laravel mix because of react! : D

[richlove1]

+1 for adding to Laravel mix because of Vuex! : D

[82rules]

So when I add this to my .babelrc, I get other errors from compile, I'm also trying to enable spread but I'm not sure how to add configs to .babelrc in mix without overriding what's there

[villers]

Hello just put this in your babel rc for react

https://github.com/villers/priscillablog/blob/master/.babelrc

[brickgale]

+1 for Vuex

[luongs3]

+1m for Vuex

[samarhaider]

I am getting below error

Syntax Error: Unexpected token (22:10)

20 |
21 | class Dashboard extends Component {

22 | state = {};
| ^
23 |

Can any one help ?

[55Cancri]

@samarhaider did you ever fix that bug? I am receiving the exact one and I have no idea what to do!

[samarhaider]

@55Cancri

I changed

// state = {};

to

```
constructor() {
super();

   this.state = { };
 }

```

[pavke]

npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-stage-0

Create .babelrc file at root folder with

{
  "presets": [
    "env",
    "stage-0",
    "react"
  ]
}

[nickosepulveda]

this config is correct!
{
"presets": [
"env",
"stage-0",
"react"
],
"plugins": ["transform-object-rest-spread"]
}

[aligajani]

Works fine on latest Mix version, thanks @JeffreyWay for adding it.

[smsbhatt]

    methods:Object.assign({
        getCompanyStatus([expiry,status]){
            return 'active'
        }
    },mapActions([
        'limitUsers',
        'sendResetLink',
        'showCompanyModal',
        'removeCompany',
        'toggleAddons',
        'getCompanies',
        'getReferencePermissions'
    ])),

You can use Object.assign instead of spread operator .
eg:
{ ...myObj, a : 1 } is equal to Object.assign( { a : 1 }, myObj )