diff --git a/.changeset/shaggy-books-give.md b/.changeset/shaggy-books-give.md
new file mode 100644
index 000000000000..1f5c26945aa9
--- /dev/null
+++ b/.changeset/shaggy-books-give.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Support Vite 3.1
diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts
index d946dd2566aa..5d1bf2c181d9 100644
--- a/packages/astro/src/vite-plugin-astro/index.ts
+++ b/packages/astro/src/vite-plugin-astro/index.ts
@@ -340,17 +340,17 @@ ${source}
 				throw err;
 			}
 		},
-		async handleHotUpdate(this: PluginContext, context) {
+		async handleHotUpdate(context) {
 			if (context.server.config.isProduction) return;
 			const compileProps: CompileProps = {
 				config,
 				filename: context.file,
 				moduleId: context.file,
 				source: await context.read(),
-				transformStyle: createTransformStyles(styleTransformer, context.file, true, this),
+				transformStyle: createTransformStyles(styleTransformer, context.file, true),
 			};
 			const compile = () => cachedCompilation(compileProps);
-			return handleHotUpdate.call(this, context, {
+			return handleHotUpdate(context, {
 				config,
 				logging,
 				compile,
diff --git a/packages/astro/src/vite-style-transform/style-transform.ts b/packages/astro/src/vite-style-transform/style-transform.ts
index 276a52246fcd..6c63158af805 100644
--- a/packages/astro/src/vite-style-transform/style-transform.ts
+++ b/packages/astro/src/vite-style-transform/style-transform.ts
@@ -30,14 +30,8 @@ export function createTransformStyles(
 	viteStyleTransformer: ViteStyleTransformer,
 	filename: string,
 	ssr: boolean,
-	pluginContext: PluginContext
+	pluginContext?: PluginContext
 ): TransformStyle {
-	// handleHotUpdate doesn't have `addWatchFile` used by transformStyleWithVite.
-	// TODO, refactor, why is this happening *here* ?
-	if (!pluginContext.addWatchFile) {
-		pluginContext.addWatchFile = () => {};
-	}
-
 	const normalizedID = getNormalizedIDForPostCSS(filename);
 
 	return async function (styleSource, lang) {
diff --git a/packages/astro/src/vite-style-transform/transform-with-vite.ts b/packages/astro/src/vite-style-transform/transform-with-vite.ts
index e473531fe455..71276dd0de38 100644
--- a/packages/astro/src/vite-style-transform/transform-with-vite.ts
+++ b/packages/astro/src/vite-style-transform/transform-with-vite.ts
@@ -46,7 +46,10 @@ export function createTransformStyleWithViteFn(
 
 		viteDevServer?.moduleGraph.ensureEntryFromUrl(styleId, ssr, false);
 
-		const transformResult = await transformCss.call(this, source, styleId, ssr);
+		// This function could be called in a custom Vite hook like `handleHotUpdate`
+		// which doesn't have a context
+		const ctx = this ?? { addWatchFile: () => {} };
+		const transformResult = await transformCss.call(ctx, source, styleId, ssr);
 
 		// NOTE: only `code` and `map` are returned by vite:css
 		const { code, map } = transformResult;