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
– tao, Commented Sep 24, 2022 at 1: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 stackoverflow.com/help/mcve and the problem was probably caused by a typo which isn't shown — Estus Flask
– Estus Flask, Commented Sep 24, 2022 at 8: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 minimal reproducible example. At the very least you should show the entire contents of the <script> tag of the component which outputs the error. I'm fairly certain there's something wrong with that component's syntax (e.g: you might have placed getEventColor outside of methods, directly on the definition object, or something similar). — tao
– tao, Commented Sep 24, 2022 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 for more details. — tao
– tao, Commented Sep 24, 2022 at 21:34

tao · Accepted Answer · 2022-09-24 01:03:55Z

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, 2022 at 1:03

answered Sep 24, 2022 at 0:52

tao

91k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mikeym Over a year ago

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.

tao Over a year ago

I'm afraid I can't help without more context. Why not create a runnable minimal reproducible example, showing the entire file? If you need a multi-file node-like environment, use codesandbox.io or similar.

meet vaghsiya Over a year ago

Hey tao!!.. how to use emoji (like you use hand here) while giving answer ? i did't find here.

tao Over a year ago

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.

mikeym Over a year ago

@tao Thanks for the suggestion all the same. Something is obviously going wrong during compilation so I'll have to look into it deeper.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related