fix(react-email): Dependencies outside dependency graph directory not being resolved fully (#2093)

Author: gabrielmfern

.changeset/eleven-plums-type.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+Ensure dependencies outside emails directory are completely resolved

packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.spec.ts

@@ -39,6 +39,12 @@ test('createDependencyGraph()', async () => {
   };
 
   const initialDependencyGraph = convertPathsToAbsolute({
+    '../../../../../package.json': {
+      dependencyPaths: [],
+      dependentPaths: ['../start-dev-server.ts'],
+      moduleDependencies: [],
+      path: '../../../../../package.json',
+    },
     'create-dependency-graph.ts': {
       path: 'create-dependency-graph.ts',
       dependencyPaths: ['../start-dev-server.ts', 'get-imported-modules.ts'],
@@ -54,6 +60,12 @@ test('createDependencyGraph()', async () => {
       dependentPaths: [],
       moduleDependencies: ['node:fs', 'node:path'],
     },
+    '../../../utils/preview/get-env-variables-for-preview-app.ts': {
+      dependencyPaths: ['../../../utils/preview/start-dev-server.ts'],
+      dependentPaths: ['../../../utils/preview/start-dev-server.ts'],
+      moduleDependencies: ['node:path'],
+      path: '../../../utils/preview/get-env-variables-for-preview-app.ts',
+    },
     'get-imported-modules.ts': {
       path: 'get-imported-modules',
       dependentPaths: [
@@ -85,14 +97,54 @@ test('createDependencyGraph()', async () => {
       ],
     },
     '../start-dev-server.ts': {
+      dependencyPaths: [
+        '../../../../../package.json',
+        '../../../../utils/register-spinner-autostopping.ts',
+        '../../../utils/preview/get-env-variables-for-preview-app.ts',
+        '../../../utils/preview/serve-static-file.ts',
+      ],
       path: '../start-dev-server.ts',
+      dependentPaths: [
+        '../../../utils/preview/get-env-variables-for-preview-app.ts',
+        'create-dependency-graph.ts',
+      ],
+      moduleDependencies: [
+        'node:http',
+        'node:path',
+        'node:url',
+        'chalk',
+        'log-symbols',
+        'next',
+        'ora',
+      ],
+    },
+    '../../../utils/preview/serve-static-file.ts': {
       dependencyPaths: [],
-      dependentPaths: ['create-dependency-graph.ts'],
-      moduleDependencies: [],
+      dependentPaths: ['../../../utils/preview/start-dev-server.ts'],
+      moduleDependencies: [
+        'node:fs',
+        'node:http',
+        'node:path',
+        'node:url',
+        'mime-types',
+      ],
+      path: '../../../utils/preview/serve-static-file.ts',
+    },
+    '../../../../utils/register-spinner-autostopping.ts': {
+      dependencyPaths: [],
+      dependentPaths: ['../../../utils/preview/start-dev-server.ts'],
+      moduleDependencies: ['log-symbols', 'ora'],
+      path: '../../../../utils/register-spinner-autostopping.ts',
+    },
+    '../../../../utils/types/hot-reload-event.ts': {
+      dependencyPaths: [],
+      dependentPaths: ['../../../../utils/types/hot-reload-change.ts'],
+      moduleDependencies: ['chokidar/handler'],
+      path: '../../../../utils/types/hot-reload-event.ts',
     },
     '../../../../utils/types/hot-reload-change.ts': {
       path: '../../../../utils/types/hot-reload-change.ts',
-      dependencyPaths: [],
+      dependencyPaths: ['../../../../utils/types/hot-reload-event.ts'],
       dependentPaths: ['setup-hot-reloading.ts'],
       moduleDependencies: [],
     },

packages/react-email/src/cli/utils/preview/hot-reloading/create-dependency-graph.ts

@@ -184,20 +184,22 @@ export const createDependencyGraph = async (directory: string) => {
   };
 
   const updateModuleDependenciesInGraph = async (moduleFilePath: string) => {
-    const module = graph[moduleFilePath] ?? {
-      path: moduleFilePath,
-      dependencyPaths: [],
-      dependentPaths: [],
-      moduleDependencies: [],
-    };
+    if (graph[moduleFilePath] === undefined) {
+      graph[moduleFilePath] = {
+        path: moduleFilePath,
+        dependencyPaths: [],
+        dependentPaths: [],
+        moduleDependencies: [],
+      };
+    }
 
     const { moduleDependencies, dependencyPaths: newDependencyPaths } =
       await getDependencyPaths(moduleFilePath);
 
-    module.moduleDependencies = moduleDependencies;
+    graph[moduleFilePath].moduleDependencies = moduleDependencies;
 
     // we go through these to remove the ones that don't exist anymore
-    for (const dependencyPath of module.dependencyPaths) {
+    for (const dependencyPath of graph[moduleFilePath].dependencyPaths) {
       // Looping through only the ones that were on the dependencyPaths but are not
       // in the newDependencyPaths
       if (newDependencyPaths.includes(dependencyPath)) continue;
@@ -211,30 +213,29 @@ export const createDependencyGraph = async (directory: string) => {
       }
     }
 
-    module.dependencyPaths = newDependencyPaths;
+    graph[moduleFilePath].dependencyPaths = newDependencyPaths;
 
-    for (const dependencyPath of newDependencyPaths) {
-      const dependencyModule = graph[dependencyPath];
-      if (
-        dependencyModule !== undefined &&
-        !dependencyModule.dependentPaths.includes(moduleFilePath)
-      ) {
-        dependencyModule.dependentPaths.push(moduleFilePath);
-      } else {
+    for await (const dependencyPath of newDependencyPaths) {
+      if (graph[dependencyPath] === undefined) {
         /*
           This import path might have not been initialized as it can be outside
           of the original directory we looked into.
         */
-        graph[dependencyPath] = {
-          path: dependencyPath,
-          moduleDependencies: [],
-          dependencyPaths: [],
-          dependentPaths: [moduleFilePath],
-        };
+        await updateModuleDependenciesInGraph(dependencyPath);
       }
-    }
 
-    graph[moduleFilePath] = module;
+      const dependencyModule = graph[dependencyPath];
+
+      if (dependencyModule === undefined) {
+        throw new Error(
+          `Loading the dependency path ${dependencyPath} did not initialize it at all. This is a bug in React Email.`,
+        );
+      }
+
+      if (!dependencyModule.dependentPaths.includes(moduleFilePath)) {
+        dependencyModule.dependentPaths.push(moduleFilePath);
+      }
+    }
   };
 
   for (const filePath of modulePaths) {