I'm getting following syntax error when compilling my assets:
Syntax Error: SyntaxError: C:\xampp\htdocs\dtcburger.com\resources\js\components\stripe\STRIPEform3.vue: Unexpected token, expected ";" (51:12)
49 | {
50 | stripe:null,
> 51 | stripePK: stripePK,
| ^
52 | stripeStyles: stripeStyles,
53 | cardNumberElement:null,
54 | cardExpiryElement:null,
Here is how my code looks, is it because I used ES syntax for component data?
You need to return the object - wrap your function in parentheses and simply return the object literal:
data: () => (
{
stripe: null,
stripePK: stripePK,
//All your other properties
}
)
Alternatively, use the return statement:
data: () => {
return {
stripe: null,
stripePK: stripePK
//All your other properties
}
}
The main reason for the error is caused because {} is interpreted as a code block and not as an object literal. If you see carefully, there is no red squiggly underline on the first stripe:null, property. Because, it is interpreted as a labeled statement.
This doesn't throw an error:
{
stripe: null
}This throws an error saying Unexpected token :
{
stripe: null,
stripePK: "stripePK"
}To fix your code, you need to either return from the function
data: () => {
return {
stripe: null,
stripePK: stripePK,
...
}
}
OR, implicitly return from the arrow function by wrapping the object literal in parentheses:
data: () => ({
stripe: null,
stripePK: stripePK,
...
})
