🐛 Bug: Vite Internal Server Error – await Used Outside async Function #135

While running the frontend development server using Vite, the application crashes with an internal server error related to incorrect usage of await.

The error indicates that await is being used outside of an async function, which is not allowed in regular function scopes in TypeScript/JavaScript.

❌ Error Message

[vite] Internal server error: `await` is only allowed within async functions and at the top levels of modules
Plugin: vite:oxc
File: src/shared/component/v1/LoginPage.tsx:80:23

const response = await apiService.login(email, password)

📂 Affected File

src/shared/component/v1/LoginPage.tsx

Line: ~80

🔍 Root Cause (Expected)

The await keyword is used inside a function that is not marked as async, or it is placed directly inside a React component body instead of an event handler or effect.

Common causes:

• await used directly inside a React component body
• await used inside a normal function instead of an async function
• Missing async keyword on a handler like handleLogin

✅ Expected Behavior

• The login API call should execute inside an async function
• The Vite dev server should start without crashing
• Login flow should work correctly

🛠️ Suggested Fix

Wrap the await call inside an async function, for example:

const handleLogin = async () => {
  try {
    const response = await apiService.login(email, password)
    if (!response.success) {
      // handle error
    }
  } catch (error) {
    console.error(error)
  }
}

And call it from an event handler:

<button onClick={handleLogin}>Login</button>

🔄 Steps to Reproduce

1. Clone the repository

   git clone <repo-url>

2. Install dependencies

   pnpm install

3. Start the dev server

   pnpm dev

4. Observe the Vite internal server error

🧩 Environment

• Framework: React + TypeScript
• Bundler: Vite
• Package Manager: pnpm
• OS: Linux