diff --git a/packages/addon-dev/src/rollup-hbs-plugin.ts b/packages/addon-dev/src/rollup-hbs-plugin.ts
index 3c62d71e50..abbe92206b 100644
--- a/packages/addon-dev/src/rollup-hbs-plugin.ts
+++ b/packages/addon-dev/src/rollup-hbs-plugin.ts
@@ -1,6 +1,9 @@
 import { createFilter } from '@rollup/pluginutils';
-import type { Plugin } from 'rollup';
 import { readFileSync } from 'fs';
+import path from 'path';
+
+import type { Plugin } from 'rollup';
+
 const backtick = '`';
 
 export default function rollupHbsPlugin(): Plugin {
@@ -19,5 +22,40 @@ export default function rollupHbsPlugin(): Plugin {
         id: id + '.js',
       };
     },
+
+    // template-only components may be imported
+    async resolveId(source, importer, options) {
+      console.log(options.isEntry, source);
+
+      if (!options.isEntry) {
+        let isLocal = source.startsWith('.');
+        let hasExt = path.extname(source);
+
+        // imports with extensions will resolve automatically
+        if (!isLocal || hasExt) return;
+      }
+
+      // for relative paths inside our own package, first try normal resolving.
+      // This is calling https://www.rollupjs.org/guide/en/#thisresolve
+      let resolution = await this.resolve(source, importer, {
+        ...options,
+        skipSelf: true,
+      });
+
+      if (resolution) {
+        return resolution;
+      }
+
+      // only if that doesn't work, try to rewrite to .hbs
+      resolution = await this.resolve(`${source}.hbs`, importer, {
+        isEntry: true,
+      });
+
+      if (resolution) {
+        return resolution;
+      }
+
+      return null;
+    },
   };
 }