feat: New resolver and exports support

.eslintrc

@@ -63,7 +63,7 @@
     ],
     "jsx-a11y/label-has-for": "off",
     "no-bitwise": "off",
-    "arrow-body-style": ["error", "as-needed"],
+    "arrow-body-style": "off",
     "no-restricted-globals": "off",
     "no-restricted-syntax": "off",
     "lines-between-class-members": [

packages/app/package.json

@@ -107,7 +107,6 @@
     "babel-standalone": "^6.25.0",
     "base64-loader": "^1.0.0",
     "browser-detect": "^0.2.28",
-    "browser-resolve": "CompuIves/node-browser-resolve",
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
     "codesandbox-api": "0.0.32",

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

@@ -172,7 +172,7 @@ async function addAngularCLIResources(manager: Manager) {
 export default function initialize() {
   const preset = new Preset(
     'angular-cli',
-    ['web.ts', 'ts', 'json', 'web.tsx', 'tsx', 'js'],
+    ['web.ts', 'ts', 'json', 'web.tsx', 'tsx', 'js', 'cjs'],
     {},
     {
       setup: async manager => {
@@ -251,7 +251,7 @@ export default function initialize() {
     { transpiler: csbDynamicImportTranspiler },
   ]);
 
-  preset.registerTranspiler(module => /\.m?js$/.test(module.path), [
+  preset.registerTranspiler(module => /\.(m|c)?js$/.test(module.path), [
     {
       transpiler: babelTranspiler,
       options: {

packages/app/src/sandbox/eval/presets/create-react-app-typescript/index.ts

@@ -14,6 +14,7 @@ export default function initialize() {
     'tsx',
     'js',
     'mjs',
+    'cjs',
   ]);
 
   preset.registerTranspiler(module => /\.css$/.test(module.path), [
@@ -67,7 +68,7 @@ export default function initialize() {
   };
   preset.registerTranspiler(
     module =>
-      /\.m?(t|j)sx?$/.test(module.path) && !module.path.endsWith('.d.ts'),
+      /\.(c|m)?(t|j)sx?$/.test(module.path) && !module.path.endsWith('.d.ts'),
     [
       {
         transpiler: babelTranspiler,

packages/app/src/sandbox/eval/presets/create-react-app/utils/reactPreset.ts

@@ -40,6 +40,7 @@ export const reactPreset = babelConfig => {
       'json',
       'web.jsx',
       'jsx',
+      'cjs',
     ],
     aliases,
     {
@@ -74,9 +75,9 @@ export const reactPreset = babelConfig => {
 
             preset.registerTranspiler(
               module =>
-                !module.path.startsWith('/node_modules') &&
-                /\.m?(t|j)sx?$/.test(module.path) &&
-                !module.path.endsWith('.d.ts'),
+                /^(?!\/node_modules\/).*\.(((m|c)?jsx?)|tsx)$/.test(
+                  module.path
+                ),
               [
                 {
                   transpiler: babelTranspiler,
@@ -99,9 +100,12 @@ export const reactPreset = babelConfig => {
           }
 
           preset.registerTranspiler(
-            module =>
-              /\.m?(t|j)sx?$/.test(module.path) &&
-              !module.path.endsWith('.d.ts'),
+            module => {
+              return (
+                /\.(m|c)?(t|j)sx?$/.test(module.path) &&
+                !module.path.endsWith('.d.ts')
+              );
+            },
             [{ transpiler: babelTranspiler, options: babelConfig }]
           );
 

packages/app/src/sandbox/eval/presets/cxjs/index.ts

@@ -18,7 +18,7 @@ export default function initialize() {
     {}
   );
 
-  cxjsPreset.registerTranspiler(module => /\.m?jsx?$/.test(module.path), [
+  cxjsPreset.registerTranspiler(module => /\.(c|m)?jsx?$/.test(module.path), [
     {
       transpiler: babelTranspiler,
       options: {

packages/app/src/sandbox/eval/presets/dojo/index.ts

@@ -42,7 +42,7 @@ export default function initialize() {
     { transpiler: csbDynamicImportTranspiler },
   ]);
 
-  preset.registerTranspiler(module => /\.m?jsx?$/.test(module.path), [
+  preset.registerTranspiler(module => /\.(c|m)?jsx?$/.test(module.path), [
     {
       transpiler: babelTranspiler,
       options: {

packages/app/src/sandbox/eval/presets/parcel/index.ts

@@ -25,6 +25,8 @@ export default function initialize() {
     'parcel',
     [
       'js',
+      'mjs',
+      'cjs',
       'jsx',
       'ts',
       'tsx',
@@ -54,7 +56,7 @@ export default function initialize() {
     { transpiler: babelTranspiler },
   ]);
 
-  parcelPreset.registerTranspiler(module => /\.m?jsx?$/.test(module.path), [
+  parcelPreset.registerTranspiler(module => /\.(m|c)?jsx?$/.test(module.path), [
     {
       transpiler: babelTranspiler,
       options: {

packages/app/src/sandbox/eval/presets/preact-cli/preset.ts

@@ -24,16 +24,19 @@ export default function PreactPreset() {
     }
   );
 
-  preactPreset.registerTranspiler(module => /\.m?(t|j)sx?$/.test(module.path), [
-    {
-      transpiler: babelTranspiler,
-      options: {
-        isV7: true,
-        compileNodeModulesWithEnv: true,
-        // config is derived from babelrc at packages/common/src/templates/configuration/babelrc/index.ts
+  preactPreset.registerTranspiler(
+    module => /\.(m|c)?(t|j)sx?$/.test(module.path),
+    [
+      {
+        transpiler: babelTranspiler,
+        options: {
+          isV7: true,
+          compileNodeModulesWithEnv: true,
+          // config is derived from babelrc at packages/common/src/templates/configuration/babelrc/index.ts
+        },
       },
-    },
-  ]);
+    ]
+  );
 
   // For these routes we need to enable css modules
   const cssModulesPaths = [

packages/app/src/sandbox/eval/presets/reason/index.ts

@@ -20,7 +20,7 @@ export default function initialize() {
     { transpiler: stylesTranspiler },
   ]);
 
-  preset.registerTranspiler(module => /\.m?jsx?$/.test(module.path), [
+  preset.registerTranspiler(module => /\.(m|c)?jsx?$/.test(module.path), [
     { transpiler: babelTranspiler },
   ]);
 

packages/app/src/sandbox/eval/presets/stencil/index.ts

@@ -27,7 +27,7 @@ export default function initialize() {
     { transpiler: stencilTranspiler },
   ]);
 
-  stencilPreset.registerTranspiler(module => /\.mjs$/.test(module.path), [
+  stencilPreset.registerTranspiler(module => /\.(m|c)js$/.test(module.path), [
     { transpiler: stencilTranspiler },
     { transpiler: babelTranspiler, options: babelOptions },
   ]);

packages/app/src/sandbox/eval/presets/svelte/index.ts

@@ -22,7 +22,7 @@ const babelOptions = {
 export default function initialize() {
   const sveltePreset = new Preset('svelte', ['js', 'jsx', 'svelte'], {});
 
-  sveltePreset.registerTranspiler(module => /\.m?jsx?$/.test(module.path), [
+  sveltePreset.registerTranspiler(module => /\.(m|c)?jsx?$/.test(module.path), [
     { transpiler: babelTranspiler, options: babelOptions },
   ]);
 

packages/app/src/sandbox/eval/presets/vue-cli/v2.ts

@@ -62,7 +62,7 @@ export default function initialize(vuePreset: Preset) {
     });
   }
 
-  vuePreset.registerTranspiler(module => /\.m?jsx?$/.test(module.path), [
+  vuePreset.registerTranspiler(module => /\.(m|c)?jsx?$/.test(module.path), [
     { transpiler: babelTranspiler },
   ]);
   vuePreset.registerTranspiler(module => /\.m?tsx?$/.test(module.path), [

packages/app/src/sandbox/eval/presets/vue-cli/v3.ts

@@ -65,7 +65,7 @@ export default async function initialize(vuePreset: Preset) {
     });
   }
 
-  vuePreset.registerTranspiler(module => /\.m?jsx?$/.test(module.path), [
+  vuePreset.registerTranspiler(module => /\.(m|c)?jsx?$/.test(module.path), [
     { transpiler: babelTranspiler },
   ]);
   vuePreset.registerTranspiler(module => /\.m?tsx?$/.test(module.path), [

packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js

@@ -529,16 +529,14 @@ async function compile(opts: any) {
       dependencies,
     };
   } catch (err) {
-    if (
-      !fsInitialized &&
-      (err.message.indexOf('Cannot find module') > -1 || err.code === 'EIO')
-    ) {
+    const isModuleNotFoundError = err.code === 'MODULE_NOT_FOUND';
+    if (!fsInitialized && (isModuleNotFoundError || err.code === 'EIO')) {
       // BrowserFS was needed but wasn't initialized
       await waitForFs(loaderContextId);
       return compile(opts);
     }
 
-    if (err.message.indexOf('Cannot find module') > -1) {
+    if (isModuleNotFoundError) {
       // Try to download the file and all dependencies, retry compilation then
       await downloadFromError({
         error: err,

packages/app/src/sandbox/eval/transpilers/babel/worker/dynamic-download.ts

@@ -1,10 +1,11 @@
-import resolve from 'browser-resolve';
 import { getGlobal } from '@codesandbox/common/lib/utils/global';
+import { ModuleNotFoundError } from 'sandpack-core/lib/resolver/errors/ModuleNotFound';
+
 import getRequireStatements from './simple-get-require-statements';
-import { packageFilter } from '../../../utils/resolve-utils';
 import { convertEsModule } from '../ast/convert-esmodule';
 import { generateCode, parseModule } from '../ast/utils';
 import { ChildHandler } from '../../worker-transpiler/child-handler';
+import { resolve } from './utils/resolve';
 
 const global = getGlobal();
 const path = global.BrowserFS.BFSRequire('path');
@@ -110,11 +111,9 @@ function downloadRequires(
         }
 
         try {
-          resolve.sync(foundR.path, {
+          resolve(foundR.path, {
             filename: currentPath,
             extensions: ['.js', '.json'],
-            moduleDirectory: ['node_modules'],
-            packageFilter,
           });
         } catch (err) {
           await downloadFromError({
@@ -218,22 +217,34 @@ export async function downloadPath(
   return r;
 }
 
+function extractPathFromError(err: Error | ModuleNotFoundError): string {
+  if (err instanceof ModuleNotFoundError) {
+    return err.filepath;
+  }
+
+  if (err.message.indexOf('Cannot find module') > -1) {
+    const dep = err.message.match(/Cannot find module '(.*?)'/)[1];
+    const from = err.message.match(/from '(.*?)'/)[1];
+    const absolutePath = dep.startsWith('.') ? path.join(from, dep) : dep;
+
+    return absolutePath;
+  }
+
+  return null;
+}
+
 export function downloadFromError(opts: {
   error: Error;
   childHandler: ChildHandler;
   loaderContextId: number;
 }) {
   const { error, childHandler, loaderContextId } = opts;
-  if (error.message.indexOf('Cannot find module') > -1) {
-    const dep = error.message.match(/Cannot find module '(.*?)'/)[1];
-    const from = error.message.match(/from '(.*?)'/)[1];
-    const absolutePath = dep.startsWith('.') ? path.join(from, dep) : dep;
-
-    return downloadPath(absolutePath, {
+  const moduleSpecifier = extractPathFromError(error);
+  if (moduleSpecifier) {
+    return downloadPath(moduleSpecifier, {
       childHandler,
       loaderContextId,
     });
   }
-
   return Promise.resolve();
 }

packages/app/src/sandbox/eval/transpilers/babel/worker/evaluate.js

@@ -1,4 +1,3 @@
-import resolve from 'browser-resolve';
 import hashsum from 'hash-sum';
 import * as events from 'events';
 import * as crypto from 'crypto';
@@ -8,8 +7,8 @@ import type FSType from 'fs';
 import isESModule from 'sandbox/eval/utils/is-es-module';
 import evaluateCode from 'sandpack-core/lib/runner/eval';
 import detectOldBrowser from '@codesandbox/common/lib/detect-old-browser';
-import { packageFilter } from '../../../utils/resolve-utils';
-import { patchedResolve } from './utils/resolvePatch';
+
+import { resolve } from './utils/resolve';
 import { getBabelTypes } from './utils/babelTypes';
 
 let cache = {};
@@ -67,7 +66,7 @@ export default function evaluate(
     }
 
     if (requirePath === 'resolve') {
-      return patchedResolve();
+      return (...args) => resolve(...args);
     }
 
     if (requirePath === 'babel-register') {
@@ -132,11 +131,9 @@ export default function evaluate(
 
     const resolvedPath =
       cachedPaths[dirName][requirePath] ||
-      resolve.sync(requirePath, {
+      resolve(requirePath, {
         filename: path,
         extensions: ['.js', '.json'],
-        moduleDirectory: ['node_modules'],
-        packageFilter,
       });
 
     cachedPaths[dirName][requirePath] = resolvedPath;
@@ -206,11 +203,9 @@ export function evaluateFromPath(
   availablePlugins: Object,
   availablePresets: Object
 ) {
-  const resolvedPath = resolve.sync(path, {
-    filename: currentPath,
+  const resolvedPath = resolve(path, {
+    filename: path,
     extensions: ['.js', '.json'],
-    moduleDirectory: ['node_modules'],
-    packageFilter,
   });
 
   const code = fs.readFileSync(resolvedPath).toString();

packages/app/src/sandbox/eval/transpilers/babel/worker/utils/macrosPatch.ts

@@ -1,13 +1,13 @@
 import * as macrosPlugin from 'babel-plugin-macros';
-import { patchedResolve } from './resolvePatch';
+import { resolve } from './resolve';
 
 // eslint-disable-next-line
 let finalExports = function m(babel, options) {
   return macrosPlugin(babel, {
     ...options,
     resolvePath(source, basePath) {
-      return patchedResolve().sync(source, {
-        basePath,
+      return resolve(source, {
+        filename: basePath + '/index',
       });
     },
   });

packages/app/src/sandbox/eval/transpilers/babel/worker/utils/resolve.ts

@@ -0,0 +1,39 @@
+import {
+  resolveSync,
+  IResolveOptionsInput,
+} from 'sandpack-core/lib/resolver/resolver';
+import gensync from 'gensync';
+
+/**
+ * Patch 'resolve' to configure it to resolve esmodules by default. babel-plugin-macros goes
+ * for the commonjs version, which we don't download anymore by default.
+ */
+export function resolve(
+  specifier: string,
+  opts: Partial<IResolveOptionsInput>
+) {
+  const fs = global.BrowserFS.BFSRequire('fs');
+
+  const isFile = p => {
+    try {
+      const stats = fs.statSync(p);
+      return stats.isFile();
+    } catch (err) {
+      return false;
+    }
+  };
+
+  const resolvedPath = resolveSync(specifier, {
+    filename: '/index.js', // idk...
+    extensions: ['.js', '.mjs', '.json', '.ts', '.tsx'],
+    moduleDirectories: ['node_modules'],
+    ...opts,
+    isFile: gensync({
+      sync: p => isFile(p),
+    }),
+    readFile: gensync({
+      sync: p => fs.readFileSync(p, 'utf8'),
+    }),
+  });
+  return resolvedPath;
+}