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

Issue:
ModuleNotFoundError: Could not find module in path "" relative to ""
# 🐛 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.
- [ ] I have searched the issue tracker for an issue that matches the one I want
      to file, without success.

## Description of the problem

Seeing an error in https://codesandbox.io/s/ancient-rgb-70b30 with the latest @primer/react version. This is specifically after a [change](https://github.com/primer/react/pull/1771) that introduced subpath exports. 
The library version works fine on [stackblitz](https://stackblitz.com/edit/react-wupdy4) and on webpack powered builds in create-react-app and nextjs. I get the following error on codesandbox

`ModuleNotFoundError: Could not find module in path: '@primer/react/lib-esm/Button' relative to '/node_modules/@primer/react/lib-esm/Dialog/Dialog.js'`

![image](https://user-images.githubusercontent.com/417268/153783534-d391c6a6-d2f9-4f08-87bb-c3a7545b495c.png)

In the above error the relative path `../Button` inside `/node_modules/@primer/react/lib-esm/Dialog/Dialog.js`. During resolution, it becomes `@primer/react/lib-esm/Button` when expected path should be `node_modules/@primer/react/lib-esm/Button/index.js`. 
Do you think it may have something to do with the new resolver changes introduced in https://github.com/codesandbox/codesandbox-client/pull/6148 ?

Here is the issue tracked in `@primer/react` https://github.com/primer/react/issues/1863

I reported the same bug under https://github.com/codesandbox/codesandbox-client/issues/6172. 

## How has this issue affected you? What are you trying to accomplish?

We are unable to use @primer/react library in any codesandbox.

### To Reproduce

1. Create a react codesandbox
2. Import components from `@primer/react`. 
3. Use in the codesandbox to see the error pop up.

### Link to sandbox: [link]( https://codesandbox.io/s/ancient-rgb-70b30) (optional)

### Your Environment

| Software         | Name/Version |
| ---------------- | ------------ |
| Сodesandbox      |              |
| Browser          |              |
| Operating System |              |

<!-- 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 -->



Discussion / hints:
Hey @pksjce - Have you tried updating the version of Primer in your Dependancies? 
Hey! yes, It actually works with an older version 34.3 but not with the newer 34.4 onwards.
Thanks @pksjce - So this is likely to be an issue with the newer versions. I'll raise it as a bug on our end so we can investigate! 
@JamesACS If you don't mind can I ask if there's an ETA for a fix? (I love using sandpack (thanks!) for my blog but stumbled upon this issue)
Hey @devanshj - I'm afraid we don't have a precise ETA, it's been added to our backlog but not allocated yet. 
Ah no problems, I hope it'll be fixed soon. Thanks!

(Also wait I just read above that older 34.3.0 version still works, ha that's good enough for my case, I'll use that version :P)
Hey @devanshj - If you want to use the newer version of primer/react, you can test using https://stackblitz.com/edit/primer-react-v35?file=index.tsx
Thanks @pksjce, I was aware of that but as I said I wanted it to use it in sandpack for my blog which will need this issue to be resolved.

(Aside: I've already published the [article](https://devanshj.me/writings/what-if-view-was-tightly-coupled-to-logic). Turns out I wanted `Textarea` which was not in the older version so I ditched `@primer/react` for `@primer/css` as all I needed was a button and a textarea xD)

Fix patch:
diff --git a/packages/sandpack-core/src/resolver/resolver.ts b/packages/sandpack-core/src/resolver/resolver.ts
index 5e7522e04bb..f102dad1510 100644
--- a/packages/sandpack-core/src/resolver/resolver.ts
+++ b/packages/sandpack-core/src/resolver/resolver.ts
@@ -345,6 +345,19 @@ export const resolver = gensync<
   let foundFile = yield* expandFile(modulePath, opts);
   if (!foundFile) {
     foundFile = yield* expandFile(pathUtils.join(modulePath, 'index'), opts);
+
+    // In case alias adds an extension, we retry the entire resolution with an added /index
+    // This is mostly a hack I guess, but it works for now, so many edge-cases
+    if (!foundFile) {
+      try {
+        const parts = moduleSpecifier.split('/');
+        if (!parts.length || !parts[parts.length - 1].startsWith('index')) {
+          foundFile = yield* resolve(moduleSpecifier + '/index', opts);
+        }
+      } catch (err) {
+        // should throw ModuleNotFound for original specifier, not new one
+      }
+    }
   }
 
   if (!foundFile) {


Test patch:
diff --git a/packages/sandpack-core/src/resolver/fixture/node_modules/package-exports/src/utils/test/index.js b/packages/sandpack-core/src/resolver/fixture/node_modules/package-exports/src/utils/test/index.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/sandpack-core/src/resolver/resolver.test.ts b/packages/sandpack-core/src/resolver/resolver.test.ts
index 833780e4dd7..571c3ef079f 100644
--- a/packages/sandpack-core/src/resolver/resolver.test.ts
+++ b/packages/sandpack-core/src/resolver/resolver.test.ts
@@ -478,6 +478,18 @@ describe('resolve', () => {
         })
       ).toThrow();
     });
+
+    it('should not fail on wildcard *.js and folder references', () => {
+      const resolved = resolveSync('./test', {
+        filename: '/node_modules/package-exports/src/utils/path.js',
+        extensions: ['.ts', '.tsx', '.js', '.jsx'],
+        isFile,
+        readFile,
+      });
+      expect(resolved).toBe(
+        '/node_modules/package-exports/src/utils/test/index.js'
+      );
+    });
   });
 
   describe('normalize module specifier', () => {