Fix dynamic dependency resolving (codesandbox#526)

Author: CompuIves

packages/app/src/sandbox/eval/loaders/eval.js

@@ -7,7 +7,8 @@ export default function(
   require: Function,
   module: Object,
   env: Object = {},
-  globals: Object = {}
+  globals: Object = {},
+  { asUMD = false }: { asUMD: boolean } = {}
 ) {
   const g = typeof window === 'undefined' ? self : window;
   const exports = module.exports;
@@ -26,12 +27,12 @@ export default function(
     // eslint-disable-next-line no-eval
     (0, eval)(newCode).apply(this, [
       require,
-      module,
-      exports,
+      asUMD ? undefined : module,
+      asUMD ? undefined : exports,
       process,
       setImmediate,
       Buffer,
-      global,
+      asUMD ? undefined : global,
       ...globalsValues,
     ]);
 

packages/app/src/sandbox/eval/manager.js

@@ -474,6 +474,7 @@ export default class Manager {
         this.manifest.dependencies.find(d => d.name === dependencyName) ||
         this.manifest.dependencyDependencies[dependencyName]
       ) {
+        this.downloadDependency(connectedPath, currentPath);
         throw new ModuleNotFoundError(connectedPath, true);
       } else {
         throw new DependencyNotFoundError(connectedPath);
@@ -502,6 +503,21 @@ export default class Manager {
     });
   }
 
+  resolveTranspiledModuleAsync = async (
+    path: string,
+    currentPath: string
+  ): Promise<TranspiledModule> => {
+    try {
+      return this.resolveTranspiledModule(path, currentPath);
+    } catch (e) {
+      if (e.type === 'module-not-found' && e.isDependency) {
+        return this.downloadDependency(e.path, currentPath);
+      }
+
+      throw e;
+    }
+  };
+
   /**
    * Resolve the transpiled module from the path, note that the path can actually
    * include loaders. That's why we're focussing on first extracting this query

packages/app/src/sandbox/eval/npm/fetch-npm-module.js

@@ -105,8 +105,6 @@ function downloadDependency(depName: string, depVersion: string, path: string) {
   return packages[path];
 }
 
-const requestedPaths = [];
-
 function resolvePath(
   path: string,
   currentPath: string,
@@ -148,16 +146,14 @@ function resolvePath(
           const depName = getDependencyName(depPath);
 
           // To prevent infinite loops we keep track of which dependencies have been requested before.
-          if (requestedPaths.includes(depPath)) {
+          if (!manager.transpiledModules[p] && !meta[p]) {
             const err = new Error('Could not find ' + p);
             err.code = 'ENOENT';
 
             callback(err);
             return null;
           }
 
-          requestedPaths.push(depPath);
-
           // eslint-disable-next-line
           const subDepVersionVersionInfo = await findDependencyVersion(
             currentPath,

packages/app/src/sandbox/eval/presets/angular-cli/index.js

@@ -47,16 +47,38 @@ export default function initialize() {
 
           const { styles = [], scripts = [] } = app;
 
-          await Promise.all(
-            [...styles, ...scripts].map(async p => {
-              const finalPath = absolute(join(app.root || 'src', p));
+          /* eslint-disable no-await-in-loop */
+          for (let i = 0; i < styles.length; i++) {
+            const p = styles[i];
+            const finalPath = absolute(join(app.root || 'src', p));
+
+            const tModule = await manager.resolveTranspiledModuleAsync(
+              finalPath,
+              '/'
+            );
+
+            await tModule.transpile(manager);
+            tModule.setIsEntry(true);
+            tModule.evaluate(manager);
+          }
+          /* eslint-enable no-await-in-loop */
 
-              const module = manager.resolveModule(finalPath, '/');
-              await manager.transpileModules(module);
-              manager.evaluateModule(module);
+          const scriptTModules = await Promise.all(
+            scripts.map(async p => {
+              const finalPath = absolute(join(app.root || 'src', p));
+              const tModule = await manager.resolveTranspiledModuleAsync(
+                finalPath,
+                '/'
+              );
+              tModule.setIsEntry(true);
+              return tModule.transpile(manager);
             })
           );
 
+          scriptTModules.forEach(t => {
+            t.evaluate(manager, { asUMD: true });
+          });
+
           if (
             app.environmentSource &&
             app.environments &&

packages/app/src/sandbox/eval/transpiled-module.js

@@ -584,7 +584,7 @@ export default class TranspiledModule {
     return this;
   }
 
-  evaluate(manager: Manager) {
+  evaluate(manager: Manager, { asUMD = false }: { asUMD: boolean } = {}) {
     if (this.source == null) {
       // This scenario only happens when we are in an inconsistent state, the quickest way to solve
       // this state is to just hard reload everything.
@@ -725,7 +725,8 @@ export default class TranspiledModule {
         require,
         this.compilation,
         manager.envVariables,
-        manager.testRunner.testGlobals(this.module)
+        manager.testRunner.testGlobals(this.module),
+        { asUMD }
       );
 
       const hmrConfig = this.hmrConfig;