Compiler updates (codesandbox#853)

1. Better performance for path resolving
2. Clearer error messages for dependency not found
3. We now skip the `browser` field for `babel-core` and `@babel/core`, since they just _work_ in CodeSandbox
4. Put `getAliasedPath` in a common flow, so it doesn't have to be called multiple times
5. Add `main` field compatibility for the parcel template
6. Add `alias` field support for parcel
7. Support for node modules node-like resolving
8. `require.resolve` support

Fixes codesandbox#467

Author: CompuIves

packages/app/src/sandbox/compile.js

@@ -180,9 +180,7 @@ const PREINSTALLED_DEPENDENCIES = [
   'babel-plugin-transform-prevent-infinite-loops',
   'babel-plugin-transform-vue-jsx',
   'babel-plugin-jsx-pragmatic',
-
   '@babel/core',
-
   'flow-bin',
 ];
 

packages/app/src/sandbox/errors/dependency-not-found-error.js

@@ -3,7 +3,7 @@ import { actions, dispatch } from 'codesandbox-api';
 import SandboxError from './sandbox-error';
 
 export default class DependencyNotFoundError extends SandboxError {
-  constructor(dependencyName: string) {
+  constructor(dependencyName: string, fromPath: ?string) {
     super();
     this.path = dependencyName;
 
@@ -23,6 +23,10 @@ export default class DependencyNotFoundError extends SandboxError {
 
     this.name = 'DependencyNotFoundError';
     this.message = `Could not find dependency: '${parsedName}'`;
+
+    if (fromPath) {
+      this.message += ` relative to '${fromPath}'`;
+    }
   }
   type = 'dependency-not-found';
   severity = 'error';

packages/app/src/sandbox/errors/module-not-found-error.js

@@ -3,13 +3,17 @@
 import SandboxError from './sandbox-error';
 
 export default class ModuleNotFoundError extends SandboxError {
-  constructor(path: string, isDependency: boolean) {
+  constructor(path: string, isDependency: boolean, currentPath?: string) {
     super();
     this.path = path;
     this.isDependency = isDependency;
 
     this.name = 'ModuleNotFoundError';
     this.message = `Could not find module in path: '${path}'`;
+
+    if (currentPath) {
+      this.message += ` relative to '${currentPath}'`;
+    }
   }
   type = 'module-not-found';
   severity = 'error';

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

@@ -20,15 +20,14 @@ export default function(
   const globalsCode = ', ' + Object.keys(globals).join(', ');
   const globalsValues = Object.keys(globals).map(k => globals[k]);
   try {
-    const newCode = `(function evaluate(require, module, exports, process, setImmediate, Buffer, global${globalsCode}) {${code}\n})`;
+    const newCode = `(function evaluate(require, module, exports, process, setImmediate, global${globalsCode}) {${code}\n})`;
     // eslint-disable-next-line no-eval
     (0, eval)(newCode).apply(this, [
       require,
       asUMD ? undefined : module,
       asUMD ? undefined : exports,
       process,
       setImmediate,
-      Buffer,
       asUMD ? undefined : global,
       ...globalsValues,
     ]);

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

@@ -22,6 +22,7 @@ import ModuleNotFoundError from '../errors/module-not-found-error';
 import TestRunner from './tests/jest-lite';
 import dependenciesToQuery from '../npm/dependencies-to-query';
 import isESModule from './utils/is-es-module';
+import { packageFilter } from './utils/resolve-utils';
 
 import { ignoreNextCache, deleteAPICache } from './cache';
 
@@ -57,6 +58,19 @@ export type Manifest = {
 };
 
 const NODE_LIBS = ['dgram', 'net', 'tls', 'fs', 'module', 'child_process'];
+// For these dependencies we don't want to follow along with the `browser` field
+const SKIPPED_BROWSER_FIELD_DEPENDENCIES = ['babel-core', '@babel/core'].reduce(
+  (result, next) => ({
+    ...result,
+    [`/node_modules/${next}/package.json`]: true,
+  }),
+  {}
+);
+const SHIMMED_MODULE: Module = {
+  path: pathUtils.join('/node_modules', 'empty', 'index.js'),
+  code: `// empty`,
+  requires: [],
+};
 const debug = _debug('cs:compiler:manager');
 
 export default class Manager {
@@ -177,6 +191,13 @@ export default class Manager {
         code: this.manifest.contents[path].content,
       };
 
+      if (SKIPPED_BROWSER_FIELD_DEPENDENCIES[path]) {
+        const pJsonCode = JSON.parse(this.manifest.contents[path].content);
+        // eslint-disable-next-line
+        delete pJsonCode.browser;
+        module.code = JSON.stringify(pJsonCode, null, 2);
+      }
+
       // Check if module syntax, only transpile when that's NOT the case
       // TODO move this check to the packager
       if (!isESModule(module.code)) {
@@ -220,8 +241,11 @@ export default class Manager {
     }
   }
 
-  evaluateTranspiledModule(transpiledModule: TranspiledModule) {
-    return transpiledModule.evaluate(this);
+  evaluateTranspiledModule(
+    transpiledModule: TranspiledModule,
+    initiator?: TranspiledModule
+  ) {
+    return transpiledModule.evaluate(this, undefined, initiator);
   }
 
   addModule(module: Module) {
@@ -422,82 +446,86 @@ export default class Manager {
     currentPath: string,
     defaultExtensions: Array<string> = ['js', 'jsx', 'json']
   ): Module {
-    const aliasedPath = this.getAliasedDependencyPath(path, currentPath);
-    const shimmedPath = coreLibraries[aliasedPath] || aliasedPath;
-
     const dirredPath = pathUtils.dirname(currentPath);
-
-    if (!this.cachedPaths[dirredPath]) {
+    if (this.cachedPaths[dirredPath] === undefined) {
       this.cachedPaths[dirredPath] = {};
     }
-    const cachedPath = this.cachedPaths[dirredPath][shimmedPath];
-    try {
-      let resolvedPath;
 
-      if (cachedPath) {
-        resolvedPath = cachedPath;
-      } else {
+    const cachedPath = this.cachedPaths[dirredPath][path];
+
+    let resolvedPath;
+
+    if (cachedPath) {
+      resolvedPath = cachedPath;
+    } else {
+      const presetAliasedPath = this.preset
+        .getAliasedPath(path)
+        .replace(/.*\{\{sandboxRoot\}\}/, '');
+
+      const aliasedPath = this.getAliasedDependencyPath(
+        presetAliasedPath,
+        currentPath
+      );
+      const shimmedPath = coreLibraries[aliasedPath] || aliasedPath;
+
+      if (NODE_LIBS.includes(shimmedPath)) {
+        return SHIMMED_MODULE;
+      }
+
+      try {
         resolvedPath = resolve.sync(shimmedPath, {
           filename: currentPath,
           extensions: defaultExtensions.map(ext => '.' + ext),
           isFile: this.isFile,
           readFileSync: this.readFileSync,
-          packageFilter: p => {
-            if (!p.main && p.module) {
-              // eslint-disable-next-line
-              p.main = p.module;
-            }
-
-            return p;
-          },
+          packageFilter,
           moduleDirectory: ['node_modules', this.envVariables.NODE_PATH].filter(
             Boolean
           ),
         });
 
-        this.cachedPaths[dirredPath][shimmedPath] = resolvedPath;
-      }
+        this.cachedPaths[dirredPath][path] = resolvedPath;
 
-      if (NODE_LIBS.includes(shimmedPath) || resolvedPath === '//empty.js') {
-        return {
-          path: pathUtils.join('/node_modules', 'empty', 'index.js'),
-          code: `// empty`,
-          requires: [],
-        };
-      }
+        if (!this.transpiledModules[resolvedPath]) {
+          throw new Error(`Could not find '${resolvedPath}' in local files.`);
+        }
+      } catch (e) {
+        if (
+          this.cachedPaths[dirredPath] &&
+          this.cachedPaths[dirredPath][path]
+        ) {
+          delete this.cachedPaths[dirredPath][path];
+        }
 
-      return this.transpiledModules[resolvedPath].module;
-    } catch (e) {
-      if (
-        this.cachedPaths[dirredPath] &&
-        this.cachedPaths[dirredPath][shimmedPath]
-      ) {
-        delete this.cachedPaths[dirredPath][shimmedPath];
-      }
+        let connectedPath = /^(\w|@\w)/.test(shimmedPath)
+          ? pathUtils.join('/node_modules', shimmedPath)
+          : pathUtils.join(pathUtils.dirname(currentPath), shimmedPath);
 
-      let connectedPath = /^(\w|@\w)/.test(shimmedPath)
-        ? pathUtils.join('/node_modules', shimmedPath)
-        : pathUtils.join(pathUtils.dirname(currentPath), shimmedPath);
+        const isDependency = connectedPath.includes('/node_modules/');
 
-      const isDependency = connectedPath.includes('/node_modules/');
+        connectedPath = connectedPath.replace('/node_modules/', '');
 
-      connectedPath = connectedPath.replace('/node_modules/', '');
+        if (!isDependency) {
+          throw new ModuleNotFoundError(shimmedPath, false, currentPath);
+        }
 
-      if (!isDependency) {
-        throw new ModuleNotFoundError(shimmedPath, false);
-      }
+        const dependencyName = getDependencyName(connectedPath);
 
-      const dependencyName = getDependencyName(connectedPath);
+        if (
+          this.manifest.dependencies.find(d => d.name === dependencyName) ||
+          this.manifest.dependencyDependencies[dependencyName]
+        ) {
+          throw new ModuleNotFoundError(connectedPath, true, currentPath);
+        } else {
+          throw new DependencyNotFoundError(connectedPath, currentPath);
+        }
+      }
 
-      if (
-        this.manifest.dependencies.find(d => d.name === dependencyName) ||
-        this.manifest.dependencyDependencies[dependencyName]
-      ) {
-        throw new ModuleNotFoundError(connectedPath, true);
-      } else {
-        throw new DependencyNotFoundError(connectedPath);
+      if (resolvedPath === '//empty.js') {
+        return SHIMMED_MODULE;
       }
     }
+    return this.transpiledModules[resolvedPath].module;
   }
 
   downloadDependency(
@@ -556,12 +584,8 @@ export default class Manager {
     // pop() mutates queryPath, queryPath is now just the loaders
     const modulePath = queryPath.pop();
 
-    const newPath = this.preset
-      .getAliasedPath(modulePath)
-      .replace(/.*\{\{sandboxRoot\}\}/, '');
-
     const module = this.resolveModule(
-      newPath,
+      modulePath,
       currentPath,
       ignoredExtensions || this.preset.ignoredExtensions
     );
@@ -685,7 +709,8 @@ export default class Manager {
     debug(
       `Generated update diff, updating ${
         transpiledModulesToUpdate.length
-      } modules.`
+      } modules.`,
+      transpiledModulesToUpdate
     );
 
     return Promise.all(