[SOLVED] Await is a reserved word error inside async function

Await is a reserved word error inside async function

I am struggling to figure out the issue with the following syntax:

export const sendVerificationEmail = async () =>
  (dispatch) => {
    try {
      dispatch({ type: EMAIL_FETCHING, payload: true });
      await Auth.sendEmailVerification();
      dispatch({ type: EMAIL_FETCHING, payload: false }))
    } catch (error) {
      dispatch({ type: EMAIL_FETCHING, payload: false });
      throw new Error(error);
    }
  };

I keep getting error saying:

await is a reserved word

...but isn't it legal within an async function?

The dispatch bit is coming from the react-thunk library.

Solution

In order to use await, the function directly enclosing it needs to be async. According to your comment, adding async to the inner function fixes your issue, so I'll post that here:

export const sendVerificationEmail = async () =>
  async (dispatch) => {
    try {
      dispatch({ type: EMAIL_FETCHING, payload: true });
      await Auth.sendEmailVerification();
      dispatch({ type: EMAIL_FETCHING, payload: false }))
    } catch (error) {
      dispatch({ type: EMAIL_FETCHING, payload: false });
      throw new Error(error);
    }
  };

Possibly, you could remove the async from the outer function because it does not contain any asynchronous operations, but that would depend on whether the caller of sendVerificationEmail() is expecting it to return a promise or not.