New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can't compile object spread operator unexpected token error #76

Closed
jericopulvera opened this Issue Jan 11, 2017 · 21 comments

Comments

Projects
None yet
@jericopulvera
Copy link

jericopulvera commented Jan 11, 2017

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 | },

@jericopulvera jericopulvera changed the title can't compile vuex ...mapState({}) unexpected token error can't compile object spread operator unexpected token error Jan 11, 2017

@JeffreyWay

This comment has been minimized.

Copy link
Owner

JeffreyWay commented Jan 11, 2017

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

@kpilard

This comment has been minimized.

Copy link

kpilard commented Jan 11, 2017

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

This comment has been minimized.

Copy link
Owner

JeffreyWay commented Jan 11, 2017

Thanks, @kpilard! Closing this now.

@JeffreyWay JeffreyWay closed this Jan 11, 2017

@claytonrcarter

This comment has been minimized.

Copy link
Contributor

claytonrcarter commented Jan 13, 2017

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

This comment has been minimized.

Copy link

manogi commented Feb 2, 2017

+1 for including this in laravel-mix

@JeffreyWay

This comment has been minimized.

Copy link
Owner

JeffreyWay commented Feb 3, 2017

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

This comment has been minimized.

Copy link

manogi commented Feb 3, 2017

@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

This comment has been minimized.

Copy link

mesqueeb commented May 19, 2017

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

@villers

This comment has been minimized.

Copy link

villers commented Jun 4, 2017

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

@richlove1

This comment has been minimized.

Copy link

richlove1 commented Jun 14, 2017

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

@82rules

This comment has been minimized.

Copy link

82rules commented Jun 28, 2017

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

This comment has been minimized.

Copy link

villers commented Jun 28, 2017

Hello just put this in your babel rc for react

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

@brickgale

This comment has been minimized.

Copy link

brickgale commented Sep 28, 2017

+1 for Vuex

@luongs3

This comment has been minimized.

Copy link

luongs3 commented Nov 1, 2017

+1m for Vuex

@samarhaider

This comment has been minimized.

Copy link

samarhaider commented Nov 2, 2017

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

This comment has been minimized.

Copy link

55Cancri commented Dec 13, 2017

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

@samarhaider

This comment has been minimized.

Copy link

samarhaider commented Dec 13, 2017

@55Cancri

I changed

// state = {};

to

constructor() {
    super();

    this.state = { };
  }
@pavke

This comment has been minimized.

Copy link

pavke commented Jan 5, 2018

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 comment has been minimized.

Copy link

nickosepulveda commented Jan 23, 2018

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

@aligajani

This comment has been minimized.

Copy link

aligajani commented Jun 2, 2018

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

@smsbhatt

This comment has been minimized.

Copy link

smsbhatt commented Jun 4, 2018

    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 )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment