Repository: codesandbox/codesandbox-client (language: javascript)

Issue:
The "Could not find module in path" error on an attempt to load a package that contains esm and cjs modules
# 🐛 bug report

## Preflight Checklist

<!-- Please ensure you've completed the following steps by replacing [ ] with [x]-->

- [x] I have read the [Contributing Guidelines][contributing] for this project.
- [x] I agree to follow the [Code of Conduct][code_of_conduct] that this project
      adheres to.
- [x] I have searched the issue tracker for an issue that matches the one I want
      to file, without success.

## Description of the problem

The CodeSandBox cannot load load the 'devextreme' package which is imported inside the 'devextreme-react' package


## How has this issue affected you? What are you trying to accomplish?

We used CodeSandBox to generate examples from our [demos](https://js.devexpress.com/React/Demos/WidgetsGallery/Demo/DataGrid/SimpleArray/MaterialBlueLight/). See "Copy To CodeSandBox" 

So, I'm unable to use CodeSandBox check issues or show demos to our clients.

### To Reproduce

Please open the example I shared below below.

### Link to sandbox: [link](https://codesandbox.io/p/sandbox/dx-datagrid-selection-mutation-forked-jpxjrw)

### Your Environment

| Software         | Name/Version |
| ---------------- | ------------ |
| Browser          |      Chrome   version 122      |
| Operating System |    Windows 11          |

<!-- prettier-ignore-start -->
[code_of_conduct]: https://github.com/codesandbox/codesandbox-client/blob/master/CODE_OF_CONDUCT.md
[contributing]: https://github.com/codesandbox/codesandbox-client/blob/master/CONTRIBUTING.md
<!-- prettier-ignore-end -->

## Additional information

The issue doesn't specific to the "devextreme-react" package. The issue is the same for the "devextreme-angular" and "devextreme-vue" packages. It started on March 8 according to our experience. The example I shared below was created earlier and working fine for some time.

![CSB_Issue](https://github.com/codesandbox/codesandbox-client/assets/22076961/8c824cb1-3a38-4ade-a3a5-013c7a5a4351)




Discussion / hints:
Here is a slimmed down version of this issue: https://codesandbox.io/s/testing-ds-lib-rhfrz6?file=/src/index.ts

> ModuleNotFoundError: Could not find module in path: '@atlaskit/ds-lib/warn-once' relative to '/src/index.ts'

Operating System: Mac@14.4
Thanks for the repro! I found the issue, it's a regression from a recent performance optimization in our resolver. Reverting that one now...

Fix patch:
diff --git a/packages/sandpack-core/src/manager.ts b/packages/sandpack-core/src/manager.ts
index e84d7ba561c..3609be9e35e 100644
--- a/packages/sandpack-core/src/manager.ts
+++ b/packages/sandpack-core/src/manager.ts
@@ -21,8 +21,7 @@ import {
   SerializedTranspiledModule,
 } from './transpiled-module/transpiled-module';
 import { Preset } from './preset';
-import {
-  fetchModule,
+import fetchModule, {
   setCombinedMetas,
   combinedMetas,
 } from './npm/dynamic/fetch-npm-module';
diff --git a/packages/sandpack-core/src/npm/dynamic/fetch-npm-module.ts b/packages/sandpack-core/src/npm/dynamic/fetch-npm-module.ts
index 0df6dad4c0d..fc9f15723bf 100644
--- a/packages/sandpack-core/src/npm/dynamic/fetch-npm-module.ts
+++ b/packages/sandpack-core/src/npm/dynamic/fetch-npm-module.ts
@@ -9,10 +9,7 @@ import { getFetchProtocol } from './fetch-protocols';
 import { getDependencyName } from '../../utils/get-dependency-name';
 import { TranspiledModule } from '../../transpiled-module';
 import { DEFAULT_EXTENSIONS } from '../../utils/extensions';
-import {
-  invalidatePackageFromCache,
-  resolveAsync,
-} from '../../resolver/resolver';
+import { resolveAsync } from '../../resolver/resolver';
 
 export type Meta = {
   [path: string]: true;
@@ -95,7 +92,7 @@ function getMeta(
 
 const downloadedAllDependencies = new Set<string>();
 /**
- * If the protocol supports it, download all files of the dependency
+ * If the protocol supports it, download all all files of the dependency
  * at once. It's an optimization.
  */
 export async function downloadAllDependencyFiles(
@@ -120,14 +117,6 @@ export async function downloadAllDependencyFiles(
   return null;
 }
 
-const packagesToInvalidate = new Set<string>();
-function invalidatePendingPackages(manager: Manager) {
-  for (const pkgName of packagesToInvalidate) {
-    invalidatePackageFromCache(pkgName, manager.resolverCache);
-    packagesToInvalidate.delete(pkgName);
-  }
-}
-
 export function downloadDependency(
   name: string,
   version: string,
@@ -140,8 +129,6 @@ export function downloadDependency(
     return foundPkg;
   }
 
-  packagesToInvalidate.add(depName);
-
   const relativePath = path
     .replace(
       new RegExp(
@@ -181,8 +168,6 @@ function resolvePath(
   meta: Meta = {},
   ignoreDepNameVersion: string = ''
 ): Promise<string> {
-  invalidatePendingPackages(manager);
-
   const currentPath = currentTModule.module.path;
 
   const isFile = gensync({
@@ -226,13 +211,7 @@ function resolvePath(
         if (subDepVersionVersionInfo) {
           const { version: subDepVersion } = subDepVersionVersionInfo;
           try {
-            const module = await downloadDependency(
-              depName,
-              subDepVersion,
-              p
-            ).finally(() => {
-              invalidatePendingPackages(manager);
-            });
+            const module = await downloadDependency(depName, subDepVersion, p);
 
             if (module) {
               manager.addModule(module);
@@ -254,7 +233,6 @@ function resolvePath(
   });
 
   return resolveAsync(path, {
-    resolverCache: manager.resolverCache,
     filename: currentPath,
     extensions: defaultExtensions.map(ext => '.' + ext),
     moduleDirectories: ['node_modules', manager.envVariables.NODE_PATH].filter(
@@ -371,14 +349,12 @@ async function getDependencyVersion(
   return null;
 }
 
-export async function fetchModule(
+export default async function fetchModule(
   path: string,
   currentTModule: TranspiledModule,
   manager: Manager,
   defaultExtensions: Array<string> = DEFAULT_EXTENSIONS
 ): Promise<Module> {
-  invalidatePendingPackages(manager);
-
   const currentPath = currentTModule.module.path;
 
   // Get the last part of the path as dependency name for paths like
@@ -448,7 +424,5 @@ export async function fetchModule(
     };
   }
 
-  return downloadDependency(dependencyName, version, foundPath).finally(() => {
-    invalidatePendingPackages(manager);
-  });
+  return downloadDependency(dependencyName, version, foundPath);
 }
diff --git a/packages/sandpack-core/src/resolver/resolver.ts b/packages/sandpack-core/src/resolver/resolver.ts
index a738b802304..78ea22e289d 100644
--- a/packages/sandpack-core/src/resolver/resolver.ts
+++ b/packages/sandpack-core/src/resolver/resolver.ts
@@ -15,18 +15,6 @@ import {
 
 export type ResolverCache = Map<string, any>;
 
-export function invalidatePackageFromCache(
-  pkgName: string,
-  cache: ResolverCache
-): void {
-  const lowerPkgName = pkgName.toLowerCase();
-  for (const [key] of cache) {
-    if (key.toLowerCase().includes(lowerPkgName)) {
-      cache.delete(key);
-    }
-  }
-}
-
 export interface IResolveOptionsInput {
   filename: string;
   extensions: string[];
@@ -219,14 +207,14 @@ function* resolveNodeModule(
             : yield* loadNearestPackageJSON(pkgFilePath, opts, rootDir);
         if (pkgJson) {
           try {
-            return yield* resolve(pkgFilePath, {
+            return yield* resolver(pkgFilePath, {
               ...opts,
               filename: pkgJson.filepath,
               pkgJson,
             });
           } catch (err) {
             if (!pkgSpecifierParts.filepath) {
-              return yield* resolve(pathUtils.join(pkgFilePath, 'index'), {
+              return yield* resolver(pathUtils.join(pkgFilePath, 'index'), {
                 ...opts,
                 filename: pkgJson.filepath,
               });
@@ -343,14 +331,19 @@ function* getTSConfig(
   return config;
 }
 
-function* resolve(
-  moduleSpecifier: string,
-  inputOpts: IResolveOptionsInput,
-  skipIndexExpansion: boolean = false
+export const resolver = gensync<
+  (
+    moduleSpecifier: string,
+    inputOpts: IResolveOptionsInput,
+    skipIndexExpansion?: boolean
+  ) => string
+>(function* resolve(
+  moduleSpecifier,
+  inputOpts,
+  skipIndexExpansion = false
 ): Generator<any, string, any> {
   const normalizedSpecifier = normalizeModuleSpecifier(moduleSpecifier);
   const opts = normalizeResolverOptions(inputOpts);
-
   const modulePath = yield* resolveModule(normalizedSpecifier, opts);
 
   if (modulePath[0] !== '/') {
@@ -373,8 +366,7 @@ function* resolve(
     }
 
     try {
-      const resolved = yield* resolveNodeModule(modulePath, opts);
-      return resolved;
+      return yield* resolveNodeModule(modulePath, opts);
     } catch (e) {
       throw new ModuleNotFoundError(normalizedSpecifier, opts.filename);
     }
@@ -403,15 +395,7 @@ function* resolve(
   }
 
   return foundFile;
-}
-
-export const resolver = gensync<
-  (
-    moduleSpecifier: string,
-    inputOpts: IResolveOptionsInput,
-    skipIndexExpansion?: boolean
-  ) => string
->(resolve);
+});
 
 export const resolveSync = resolver.sync;
 export const resolveAsync = resolver.async;


Test patch: