fix(modules): Add modules to TS project so type augmentation works (#722)

packages/wxt/e2e/tests/typescript-project.test.ts

@@ -375,4 +375,9 @@ describe('TypeScript Project', () => {
       }"
     `);
   });
+
+  // TODO: Once a module has been published, use it here for testing - local files are never added to the .wxt/wxt.d.ts file
+  it.todo(
+    'should add modules from NPM to the TS project if they have a configKey',
+  );
 });

packages/wxt/src/core/utils/building/generate-wxt-dir.ts

@@ -204,6 +204,16 @@ async function writeMainDeclarationFile(references: string[]): Promise<string> {
         (ref) =>
           `/// <reference types="./${normalizePath(relative(dir, ref))}" />`,
       ),
+
+      // Add references to modules installed from NPM to the TS project so
+      // their type augmentation can update InlineConfig correctly. Local
+      // modules defined in <root>/modules are already apart of the project, so
+      // we don't need to add them.
+      ...wxt.config.modules
+        .filter(
+          (module) => module.type === 'node_module' && module.configKey != null,
+        )
+        .map((module) => `/// <reference types="${module.id}" />`),
     ].join('\n') + '\n',
   );
   return filePath;

packages/wxt/src/core/utils/building/resolve-config.ts

@@ -11,6 +11,7 @@ import {
   Logger,
   WxtCommand,
   WxtModule,
+  WxtModuleWithMetadata,
 } from '~/types';
 import path from 'node:path';
 import { createFsCache } from '~/core/utils/cache';
@@ -380,15 +381,21 @@ export async function mergeBuilderConfig(
 export async function resolveWxtModules(
   modulesDir: string,
   modules: string[] = [],
-): Promise<WxtModule<any>[]> {
-  // Resolve NPM packages
-  const npmModules = await Promise.all(
+): Promise<WxtModuleWithMetadata<any>[]> {
+  // Resolve node_modules modules
+  const npmModules = await Promise.all<WxtModuleWithMetadata<any>>(
     modules.map(async (moduleId) => {
-      const mod = await import(/* @vite-ignore */ moduleId);
+      const mod: { default: WxtModule<any> } = await import(
+        /* @vite-ignore */ moduleId
+      );
       if (mod.default == null) {
         throw Error('Module missing default export: ' + moduleId);
       }
-      return mod.default;
+      return {
+        ...mod.default,
+        type: 'node_module',
+        id: moduleId,
+      };
     }),
   );
 
@@ -397,10 +404,11 @@ export async function resolveWxtModules(
     cwd: modulesDir,
     onlyFiles: true,
   }).catch(() => []);
-  const localModules = await Promise.all(
+  const localModules = await Promise.all<WxtModuleWithMetadata<any>>(
     localModulePaths.map(async (file) => {
+      const absolutePath = normalizePath(path.resolve(modulesDir, file));
       const { config } = await loadConfig<WxtModule<any>>({
-        configFile: path.resolve(modulesDir, file),
+        configFile: absolutePath,
         globalRc: false,
         rcFile: false,
         packageJson: false,
@@ -413,10 +421,12 @@ export async function resolveWxtModules(
         );
       // Add name based on filename
       config.name ??= file;
-      return config;
+      return {
+        ...config,
+        type: 'local',
+        id: absolutePath,
+      };
     }),
   );
-
-  // Execute modules
   return [...npmModules, ...localModules];
 }

packages/wxt/src/types/index.ts

@@ -1185,7 +1185,7 @@ export interface ResolvedConfig {
     reloadCommand: string | false;
   };
   hooks: NestedHooks<WxtHooks>;
-  modules: WxtModule<any>[];
+  modules: WxtModuleWithMetadata<any>[];
   /**
    * An array of string to import plugins from. These paths should be
    * resolvable by vite, and they should `export default defineWxtPlugin(...)`.
@@ -1325,6 +1325,12 @@ export interface WxtModule<TOptions extends WxtModuleOptions> {
   setup?: WxtModuleSetup<TOptions>;
 }
 
+export interface WxtModuleWithMetadata<TOptions extends WxtModuleOptions>
+  extends WxtModule<TOptions> {
+  type: 'local' | 'node_module';
+  id: string;
+}
+
 export interface ResolvedPublicFile {
   /**
    * The absolute path to the file that will be copied to the output directory.