Fix default extensions for sandpack (prefer mjs) (#4962)

* Fix default extensions for sandpack (prefer mjs) * Fix synta * Remove debugger call
codesandbox · Oct 1, 2020 · bcd308d · bcd308d
1 parent e718abe
commit bcd308d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/packages/app/src/sandbox/eval/presets/create-react-app/v3.ts b/packages/app/src/sandbox/eval/presets/create-react-app/v3.ts
@@ -122,7 +122,19 @@ export default function initialize() {
   let refreshInitialized = false;
   const preset = new Preset(
     'create-react-app',
-    ['web.js', 'js', 'json', 'web.jsx', 'jsx', 'ts', 'tsx', 'mjs'],
+    [
+      'web.mjs',
+      'mjs',
+      'web.js',
+      'js',
+      'web.ts',
+      'ts',
+      'web.tsx',
+      'tsx',
+      'json',
+      'web.jsx',
+      'jsx',
+    ],
     aliases,
     {
       hasDotEnv: true,

diff --git a/packages/sandpack-core/src/manager.ts b/packages/sandpack-core/src/manager.ts
@@ -38,6 +38,7 @@ import { splitQueryFromPath } from './transpiled-module/utils/query-path';
 import { IEvaluator } from './evaluator';
 import { setContributedProtocols } from './npm/dynamic/fetch-protocols';
 import { FileFetcher } from './npm/dynamic/fetch-protocols/file';
+import { DEFAULT_EXTENSIONS } from './utils/extensions';
 
 declare const BrowserFS: any;
 
@@ -769,7 +770,7 @@ export default class Manager implements IEvaluator {
   resolveModule(
     path: string,
     currentPath: string,
-    defaultExtensions: Array<string> = ['js', 'jsx', 'json', 'mjs']
+    defaultExtensions: Array<string> = DEFAULT_EXTENSIONS
   ): Module {
     const dirredPath = pathUtils.dirname(currentPath);
     if (this.cachedPaths[dirredPath] === undefined) {

diff --git a/packages/sandpack-core/src/npm/dynamic/fetch-npm-module.ts b/packages/sandpack-core/src/npm/dynamic/fetch-npm-module.ts
@@ -9,6 +9,7 @@ import { getFetchProtocol } from './fetch-protocols';
 import { getDependencyName } from '../../utils/get-dependency-name';
 import { packageFilter } from '../../utils/resolve-utils';
 import { TranspiledModule } from '../../transpiled-module';
+import { DEFAULT_EXTENSIONS } from '../../utils/extensions';
 
 export type Meta = {
   [path: string]: true;
@@ -128,7 +129,7 @@ function resolvePath(
   path: string,
   currentTModule: TranspiledModule,
   manager: Manager,
-  defaultExtensions: Array<string> = ['js', 'jsx', 'json', 'mjs'],
+  defaultExtensions: Array<string> = DEFAULT_EXTENSIONS,
   meta: Meta = {}
 ): Promise<string> {
   const currentPath = currentTModule.module.path;
@@ -247,7 +248,7 @@ type DependencyVersionResult =
 async function getDependencyVersion(
   currentTModule: TranspiledModule,
   manager: Manager,
-  defaultExtensions: string[] = ['js', 'jsx', 'json', 'mjs'],
+  defaultExtensions: string[] = DEFAULT_EXTENSIONS,
   dependencyName: string
 ): Promise<DependencyVersionResult | null> {
   const { manifest } = manager;
@@ -337,7 +338,7 @@ export default async function fetchModule(
   path: string,
   currentTModule: TranspiledModule,
   manager: Manager,
-  defaultExtensions: Array<string> = ['js', 'jsx', 'json', 'mjs']
+  defaultExtensions: Array<string> = DEFAULT_EXTENSIONS
 ): Promise<Module> {
   const currentPath = currentTModule.module.path;
   // Get the last part of the path as dependency name for paths like

diff --git a/packages/sandpack-core/src/utils/extensions.ts b/packages/sandpack-core/src/utils/extensions.ts
@@ -0,0 +1 @@
+export const DEFAULT_EXTENSIONS = ['mjs', 'js', 'jsx', 'json'];