Fix dynamic fetching for predefined sub node_modules

Fixes codesandbox#922

Author: CompuIves

packages/app/src/sandbox/compile.js

@@ -450,6 +450,7 @@ async function compile({
     managerModuleToTranspile = modules[main];
 
     dispatch({ type: 'status', status: 'transpiling' });
+    manager.setStage('transpilation');
 
     await manager.preset.setup(manager);
 
@@ -459,6 +460,7 @@ async function compile({
     debug(`Transpilation time ${Date.now() - t}ms`);
 
     dispatch({ type: 'status', status: 'evaluating' });
+    manager.setStage('evaluation');
 
     if (!skipEval) {
       resetScreen();

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

@@ -74,6 +74,7 @@ const SHIMMED_MODULE: Module = {
 const debug = _debug('cs:compiler:manager');
 
 type HMRStatus = 'idle' | 'check' | 'apply' | 'fail' | 'dispose';
+type Stage = 'transpilation' | 'evaluation';
 
 export default class Manager {
   id: string;
@@ -108,6 +109,8 @@ export default class Manager {
 
   configurations: Configurations;
 
+  stage: Stage;
+
   constructor(id: string, preset: Preset, modules: { [path: string]: Module }) {
     this.id = id;
     this.preset = preset;
@@ -121,6 +124,7 @@ export default class Manager {
     this.isFirstLoad = true;
     this.transpiledModulesByHash = {};
     this.configurations = {};
+    this.stage = 'transpilation';
 
     this.modules = modules;
     Object.keys(modules).forEach(k => this.addModule(modules[k]));
@@ -166,8 +170,14 @@ export default class Manager {
   }
 
   // Hoist these 2 functions to the top, since they get executed A LOT
-  isFile = (p: string) =>
-    !!this.transpiledModules[p] || !!getCombinedMetas()[p];
+  isFile = (p: string) => {
+    if (this.stage === 'transpilation') {
+      // In transpilation phase we can afford to download the file if not found,
+      // because we're async. That's why we also include the meta here.
+      return !!this.transpiledModules[p] || !!getCombinedMetas()[p];
+    }
+    return !!this.transpiledModules[p];
+  };
 
   readFileSync = (p: string) => {
     if (this.transpiledModules[p]) {
@@ -181,6 +191,10 @@ export default class Manager {
     throw err;
   };
 
+  setStage = (stage: Stage) => {
+    this.stage = stage;
+  };
+
   setManifest(manifest: ?Manifest) {
     this.manifest = manifest || {
       contents: {},

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

@@ -79,9 +79,9 @@ function getUnpkgUrl(name: string, version: string) {
     : `https://unpkg.com/${nameWithoutAlias}@${version}`;
 }
 
-function getMeta(name: string, version: string) {
+function getMeta(name: string, packageJSONPath: string, version: string) {
   const nameWithoutAlias = name.replace(/\/\d*\.\d*\.\d*$/, '');
-  const id = `${nameWithoutAlias}@${version}`;
+  const id = `${packageJSONPath}@${version}`;
   if (metas[id]) {
     return metas[id];
   }
@@ -269,7 +269,12 @@ export default async function fetchModule(
   manager: Manager,
   defaultExtensions: Array<string> = ['js', 'jsx', 'json']
 ): Promise<Module> {
-  const dependencyName = getDependencyName(path);
+  // Get the last part of the path as dependency name for paths like
+  // instantsearch.js/node_modules/lodash/sum.js
+  // In this case we want to get the lodash dependency info
+  const dependencyName = getDependencyName(
+    path.replace(/.*\/node_modules\//, '')
+  );
 
   const versionInfo = await findDependencyVersion(
     currentPath,
@@ -284,7 +289,7 @@ export default async function fetchModule(
 
   const { packageJSONPath, version } = versionInfo;
 
-  const meta = await getMeta(dependencyName, version);
+  const meta = await getMeta(dependencyName, packageJSONPath, version);
 
   const normalizeFunction = TEMP_USE_JSDELIVR ? normalizeJSDelivr : normalize;
   const normalizedMeta = normalizeFunction(