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 bodyawait 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
-
Clone the repository
-
Install dependencies
-
Start the dev server
-
Observe the Vite internal server error
𧩠Environment
- Framework: React + TypeScript
- Bundler: Vite
- Package Manager: pnpm
- OS: Linux
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
awaitis being used outside of anasyncfunction, 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π Affected File
Line: ~80
π Root Cause (Expected)
The
awaitkeyword is used inside a function that is not marked asasync, or it is placed directly inside a React component body instead of an event handler or effect.Common causes:
awaitused directly inside a React component bodyawaitused inside a normal function instead of anasyncfunctionasynckeyword on a handler likehandleLoginβ Expected Behavior
asyncfunctionπ οΈ Suggested Fix
Wrap the
awaitcall inside anasyncfunction, for example:And call it from an event handler:
π Steps to Reproduce
Clone the repository
Install dependencies
Start the dev server
Observe the Vite internal server error
𧩠Environment