diff --git a/packages/vite/src/hbs.ts b/packages/vite/src/hbs.ts
index 2b3acf784..80ff0a541 100644
--- a/packages/vite/src/hbs.ts
+++ b/packages/vite/src/hbs.ts
@@ -9,6 +9,7 @@ import {
   templateOnlyComponentSource,
   syntheticJStoHBS,
 } from '@embroider/core';
+import { extname } from 'path';
 
 const resolverLoader = new ResolverLoader(process.cwd());
 const hbsFilter = createFilter('**/*.hbs?([?]*)');
@@ -72,6 +73,22 @@ export function hbs(): Plugin {
       }
     },
 
+    handleHotUpdate(ctx) {
+      let id = ctx.file;
+      let modules = ctx.modules.slice();
+      if (isInComponents(id, resolverLoader.resolver.packageCache)) {
+        let jsFilename = id.slice(0, -1 * extname(id).length) + '.js';
+        if (jsFilename !== id) {
+          // we don't actually do any transformation of these files here, but
+          // Babel is going to run the colocation plugin to wire js and hbs
+          // together, and it doesn't know about the extra dependency between
+          // them. We can invalidate the whole transform step from here.
+          modules.push((this as any).getModuleInfo(jsFilename));
+        }
+      }
+      return modules;
+    },
+
     load(id: string) {
       if (getMeta(this, id)?.type === 'template-only-component-js') {
         return {