Could not find module in path 'mathjs/lib/cjs/function/trigonometry/tan.js' relative to '/node_modules/mathjs/lib/cjs/factoriesAny.js'

[hyrious]

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the 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

It looks like the bundler behind codesandbox can not handle require("./file.js") (with extension) correctly.

How has this issue affected you? What are you trying to accomplish?

To Reproduce

Create a new sandbox with contents: import "mathjs";

You can switch the version of mathjs, ^10 will break the resolver, ^6 is ok.

I compared the source code of different versions of mathjs, found that the old one does not include file extension in require-call. So I guess it has something to do with the resolver.

Link to sandbox: link

Your Environment

Software	Name/Version
Сodesandbox	64b57b934
Browser	100.0.4896.127 (x86_64)
Operating System	macOS 12.3.1

[hyrious]

~~It's weird, I refreshed (re-bundled) and it works again…~~

Edit: I found the right way to reproduce: toggle mathjs version to ^6, wait for it bundled, then toggle it to ^10. The error will be shown.

[JamesACS]

Hey @hyrious - Are you finding that you're able to reproduce this consistently?

[hyrious]

No :/ but it's very often. You can click the link above to try seeing this error. (I just verified again it is there.) If not, try toggling mathjs versions.

The problem is found in my another sandbox, where if I upgrade white-web-sdk to the latest version, the same error will be shown. Under the hood that library upgrades its mathjs dependency from ^6 to ^10. So I create another sandbox to see if it's related to mathjs and it turns out to be yes.

Sorry if you cannot reproduce it consistently. I can provide any information about this issue if that could help.

[JamesACS]

Hey @hyrious - I'm afraid I'm still unable to reproduce this on our side.

Would you possibly be able to provide a screen recording of what you're seeing so we can investigate further?

[hyrious]

https://user-images.githubusercontent.com/8097890/167814420-17f7c030-35f4-4ca6-971b-184a3add1bc7.mp4

Maybe it has something to do with the local cache……

Here's what I did and what I saw:

0. Delete all cache data of codesandbox at chrome://settings/siteData?searchSubpage=codesandbox (not included in the record)
1. Goto https://codesandbox.io/s/cjs-resolver-issue-xqwezd?file=/src/index.js
2. See bunch of TypeError: Failed to fetch in the console, then it shows the same error message as issue title.

[JamesACS]

That would make sense, as CodeSandbox does use your local cache.

Please could you try clearing your browser cache and cookies entirely, as well as disabling any adblockers you might be using?

[hyrious]

I see. Here's the news:

1. I deleted all data of codesandbox from chrome://settings/content/siteDetails?site=https%3A%2F%2Fcodesandbox.io
2. I went to https://codesandbox.io/s/cjs-resolver-issue-xqwezd?file=/src/index.js, with adblock disabled and mathjs@10 (latest), it looks ok:
3. If I switch the mathjs to @6 and wait for it to re-bundled and auto-refreshed the preview panel, still ok:
4. Now everything is ok, switching it back to @10 works too.

On the other hand,

3. If I switch the mathjs to @6 and not wait for it, hit the refresh button of the preview panel, something went wrong and will never be ok (even refresh the page).

I can reproduce the behaviors described above consistently.

So it does have something to do with the local cache of fetched modules. It can be said that we'd better not closing the page/refreshing the preview panel when switching versions of libraries.

[JamesACS]

Thanks @hyrious - Does the issue also persist with a hard refresh, or browser re-opening?

[hyrious]

Yes. I guess it has something to do with broken data stored in indexedDB/localstorage.