diff --git a/packages/addon-dev/src/rollup-hbs-plugin.ts b/packages/addon-dev/src/rollup-hbs-plugin.ts
index 3c62d71e5..802d6e0c2 100644
--- a/packages/addon-dev/src/rollup-hbs-plugin.ts
+++ b/packages/addon-dev/src/rollup-hbs-plugin.ts
@@ -8,15 +8,41 @@ export default function rollupHbsPlugin(): Plugin {
 
   return {
     name: 'rollup-hbs-plugin',
+    async resolveId(source: string, importer: string | undefined, options) {
+      const resolution = await this.resolve(source, importer, {
+        skipSelf: true,
+        ...options,
+      });
+
+      const id = resolution?.id;
+
+      if (!filter(id)) return null;
+
+      // This creates an `*.hbs.js` that we will populate in `load()` hook.
+      return {
+        ...resolution,
+        id: id + '.js',
+        meta: {
+          'rollup-hbs-plugin': {
+            originalId: id,
+          },
+        },
+      };
+    },
     load(id: string) {
-      if (!filter(id)) return;
-      let input = readFileSync(id, 'utf8');
+      const meta = this.getModuleInfo(id)?.meta;
+      const originalId = meta?.['rollup-hbs-plugin']?.originalId;
+
+      if (!originalId) {
+        return;
+      }
+
+      let input = readFileSync(originalId, 'utf8');
       let code =
         `import { hbs } from 'ember-cli-htmlbars';\n` +
         `export default hbs${backtick}${input}${backtick};`;
       return {
         code,
-        id: id + '.js',
       };
     },
   };