diff --git a/packages/compat/src/synthesize-template-only-components.ts b/packages/compat/src/synthesize-template-only-components.ts
index 12ad93d47..bfd0ed868 100644
--- a/packages/compat/src/synthesize-template-only-components.ts
+++ b/packages/compat/src/synthesize-template-only-components.ts
@@ -9,10 +9,7 @@ export default templateOnlyComponent();`;
 
 const templateExtension = '.hbs';
 
-// we don't need to worry about all resolvable extensions in here (like .ts)
-// because by the time we see the code it has already been preprocessed down to
-// js.
-const jsExtension = '.js';
+const jsExtensions = ['.js', '.ts', '.mjs', '.mts'];
 
 export default class SynthesizeTemplateOnlyComponents extends Plugin {
   private emitted = new Set() as Set<string>;
@@ -59,14 +56,17 @@ export default class SynthesizeTemplateOnlyComponents extends Plugin {
 }
 
 function crawl(dir: string) {
-  let needed = new Set<string>();
-  let seen = new Set<string>();
+  const needed = new Set<string>();
+  const seen = new Set<string>();
   if (pathExistsSync(dir)) {
     for (let file of walkSync(dir, { directories: false })) {
       if (file.endsWith(templateExtension)) {
         needed.add(file.slice(0, -1 * templateExtension.length));
-      } else if (file.endsWith(jsExtension)) {
-        seen.add(file.slice(0, -1 * jsExtension.length));
+      } else {
+        const jsExtension = jsExtensions.find(ext => file.endsWith(ext));
+        if (jsExtension) {
+          seen.add(file.slice(0, -1 * jsExtension.length));
+        }
       }
     }
   }
diff --git a/tests/scenarios/compat-template-colocation-test.ts b/tests/scenarios/compat-template-colocation-test.ts
index cbc3d4e4b..5849b0be4 100644
--- a/tests/scenarios/compat-template-colocation-test.ts
+++ b/tests/scenarios/compat-template-colocation-test.ts
@@ -18,6 +18,7 @@ let scenarios = appScenarios.map('compat-template-colocation', app => {
       templates: {
         'index.hbs': `
             <HasColocatedTemplate />
+            <HasColocatedTSTemplate />
             <TemplateOnlyComponent />
           `,
       },
@@ -27,6 +28,11 @@ let scenarios = appScenarios.map('compat-template-colocation', app => {
           export default class extends Component {}
           `,
         'has-colocated-template.hbs': `<div>{{this.title}}</div>`,
+        'has-colocated-ts-template.ts': `
+          import Component from '@glimmer/component';
+          export default class extends Component {}
+          `,
+        'has-colocated-ts-template.hbs': `<div>{{this.title}}</div>`,
         'template-only-component.hbs': `<div>I am template only</div>`,
       },
     },
@@ -112,6 +118,11 @@ scenarios
         );
       });
 
+      test(`app's colocated TS component is NOT synthesized`, function () {
+        let assertFile = expectFile('components/has-colocated-ts-template.js');
+        assertFile.doesNotExist('component stub was not created');
+      });
+
       test(`app's colocated components are implicitly included correctly`, function () {
         let assertFile = expectFile('assets/my-app.js');
         assertFile.matches(