diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts
index a1fbadd9b0f234..ebbced0bb41261 100644
--- a/packages/vite/src/node/build.ts
+++ b/packages/vite/src/node/build.ts
@@ -255,7 +255,10 @@ export interface BuildEnvironmentOptions {
   /**
    * create the Build Environment instance
    */
-  createEnvironment?: (builder: ViteBuilder, name: string) => BuildEnvironment
+  createEnvironment?: (
+    builder: ViteBuilder,
+    name: string,
+  ) => Promise<BuildEnvironment> | BuildEnvironment
 }
 
 export interface BuildOptions extends BuildEnvironmentOptions {
@@ -1506,7 +1509,7 @@ export async function createViteBuilder(
     const environmentConfig = await resolveConfig(environmentOptions)
     const environmentBuilder = { ...builder, config: environmentConfig }
 
-    const environment = createEnvironment(environmentBuilder, name)
+    const environment = await createEnvironment(environmentBuilder, name)
     environments[name] = environment
   }
 
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index 23b776025128f8..0680364849c68e 100644
--- a/packages/vite/src/node/config.ts
+++ b/packages/vite/src/node/config.ts
@@ -177,7 +177,10 @@ export interface DevEnvironmentOptions {
   /**
    * create the Dev Environment instance
    */
-  createEnvironment?: (server: ViteDevServer, name: string) => DevEnvironment
+  createEnvironment?: (
+    server: ViteDevServer,
+    name: string,
+  ) => Promise<DevEnvironment> | DevEnvironment
 
   /**
    * For environments that support a full-reload, like the client, we can short-circuit when
@@ -204,7 +207,10 @@ export type ResolvedDevEnvironmentOptions = Required<
 > & {
   // TODO: Should we set the default at config time? For now, it is defined on server init
   createEnvironment:
-    | ((server: ViteDevServer, name: string) => DevEnvironment)
+    | ((
+        server: ViteDevServer,
+        name: string,
+      ) => Promise<DevEnvironment> | DevEnvironment)
     | undefined
 }
 
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index bc976a963cdf86..a0b5af44c294a8 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -778,16 +778,18 @@ export async function _createServer(
     ((server: ViteDevServer, name: string) =>
       new DevEnvironment(server, name, { hot: ws }))
 
-  environments.client = client_createEnvironment(server, 'client')
+  environments.client = await client_createEnvironment(server, 'client')
 
   const ssr_createEnvironment =
     config.environments.ssr?.dev?.createEnvironment ??
     ((server: ViteDevServer, name: string) =>
       createNodeDevEnvironment(server, name, { hot: ssrHotChannel }))
 
-  environments.ssr = ssr_createEnvironment(server, 'ssr')
+  environments.ssr = await ssr_createEnvironment(server, 'ssr')
 
-  Object.entries(config.environments).forEach(([name, EnvironmentOptions]) => {
+  for (const [name, EnvironmentOptions] of Object.entries(
+    config.environments,
+  )) {
     // TODO: move client and ssr inside the loop?
     if (name !== 'client' && name !== 'ssr') {
       const createEnvironment =
@@ -796,9 +798,9 @@ export async function _createServer(
           new DevEnvironment(server, name, {
             hot: ws, // TODO: what should we use here?
           }))
-      environments[name] = createEnvironment(server, name)
+      environments[name] = await createEnvironment(server, name)
     }
-  })
+  }
 
   if (!middlewareMode) {
     exitProcess = async () => {