Vue app won't compile - Syntax Error: 'return' outside of function

Question

I am getting the following syntax error when I try to run a build on my Vue app.

error  in ./src/pages/Calendar.vue?vue&type=script&lang=ts&
Syntax Error: 'return' outside of function. (175:4)

  173 | getEventColor(event, Event);
  174 | {
> 175 |     return event.color;
      |     ^
  176 | }

The component itself has the following code.

  getEventColor (event: Event) {
    return event.color
  }

The code above does not have the syntax error getEventColor(event, Event); so I am completely confused by the error saying that the return is 'outside' the function when it clearly isn't. Also, the actual line the function is on is not 173 but 441. Line 173 is in the middle of my <template>.

The component itself is a Veutify calendar. Here is the template that refers to the getEventColor function.

 <v-calendar
   ref="calendar"
   v-model="focus"
   color="primary"           
   :events="events"
   :event-color="getEventColor"
   :now="today"
   :type="type"
   @click:event="showEvent"
   @click:more="viewDay"
   @click:date="viewDay"
   @change="updateRange"
  ></v-calendar>

If anyone has any guidance on this issue I'd be very grateful.

It looks like your component code gets compiled incorrectly. Something adds that semi there. Have you played with your IDE's settings? Are you using webpack (`@vue/cli`) or vite? Have you played with its config? Could you repro this on codesandbox? — tao, Sep 24 '22 at 01:00
Not specific to a setup, it can be seen that it's already processed as TS code. That `getEventColor (event: Event) {` is compiled to `getEventColor(event, Event);` means that isn't treated as a method because the syntax was messed up. The question lacks https://stackoverflow.com/help/mcve and the problem was probably caused by a typo which isn't shown — Estus Flask, Sep 24 '22 at 08:19
The fact you expect other devs to be able to help only by looking at the error code and not the source code indicates your idea about debugging front-end code is at least skewed. Ideally you should present a *runnable* [mcve]. At the very least you should show the entire contents of the ` — tao, Sep 24 '22 at 21:19
Is `getEventColor` a `computed`? If it is, that's the problem: computed are `getters`. So they don't take arguments. If you want them to take an argument, you have to return a function, which, in turn, could take an argument.(e.g: `computed: { getEventColor() { return (event: Event) => event.color } }` See answers to [this question](https://stackoverflow.com/questions/40522634/can-i-pass-parameters-in-computed-properties-in-vue-js) for more details. — tao, Sep 24 '22 at 21:34

tao · Answer 1 · 2022-09-24T01:03:55.520

1

It doesn't look fine to me:

                       // this needs to go!
getEventColor(event, Event); 
{
  return event.color;
}

The semi-colon I pointed to effectively ends the expression, calling getEventColor (which is probably not defined) with two params (which are probably not defined).

This leaves

{
  return event.color
}

on its own, a code block declaration, containing a return outside of a function.

edited Sep 24 '22 at 01:03

answered Sep 24 '22 at 00:52

tao

82,996
16
114
150

That's what I thought and it was the first thing I checked. However, in the code itself, as I've added in the question, the function looks perfectly fine, There is no `;` in the code, but the error says there is. – mikeym Sep 24 '22 at 00:55
I'm afraid I can't help without more context. Why not create a *runnable* [mcve], showing the entire file? If you need a multi-file node-like environment, use codesandbox.io or similar. – tao Sep 24 '22 at 00:56
Hey tao!!.. how to use emoji (like you use hand here) while giving answer ? i did't find here. – meet vaghsiya Sep 24 '22 at 04:01
I just google *"emoji hand pointing down"* (or whatever else I need) and copy/paste it. Normally you don't need to enter a search result, it's either in title or description. – tao Sep 24 '22 at 04:04
@tao Thanks for the suggestion all the same. Something is obviously going wrong during compilation so I'll have to look into it deeper. – mikeym Sep 24 '22 at 15:59

Vue app won't compile - Syntax Error: 'return' outside of function

1 Answers1