Codesandbox-client: browser entry of packages ignored

[eps1lon]

🐛 bug report

Description of the problem

Using object-hash is triggering

Cannot read property 'crypto' of undefined

in the client but not when running locally.
Edit: What I meant by locally is that that I can download the sandbox, start it locally and it does not crash in the browser.

It comes down to codesandbox ignoring the browser entry. It may not even implement webpack's mainFields resolution at all. Searching through the repo ironically only found mainFields in their own webpack.config.

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

Creating a hash for an object.

Link to sandbox: link (optional)

Your Environment

| Software | Name/Version|
| ---------------- | ---------- |
| Сodesandbox | 7bf3f2414
| Browser | Version 72.0.3626.121 (Official Build) (64-bit)
| Operating System | Ubuntu 18.04.2 LTS

[lbogdan]

Hey @eps1lon ,

That's because the object-hash package is using the Node.js crypto API, and as your sandbox is completely running in the browser, that's not available.

What you can do is use a server sandbox (which just got out of beta yesterday!), which runs in a container, and as such can fully replicate a local development environment. I made one starting from your sandbox here: https://codesandbox.io/s/y3j335o17x .

It's a bit cumbersome at the moment - you'll have to fork the node sandbox and copy files one by one, at least that's what I did -, but we'll make it easier to switch between browser and server sandboxes soon enough!

[lbogdan]

Also closing this, as it's expected behavior.

[eps1lon]

That's because the object-hash package is using the Node.js crypto API, and as your sandbox is completely running in the browser, that's not available.

object-hash is supposed to run in the browser and has set the browser field in package.json specifically for that purpose.

webpack respects this by default. I guess codesandbox is either ignoring this or changing the priority. Is there a reason for this?

@lbogdan Please consider re-opening this. I suspect that there are plenty more packages affected that use the browser field.

[lbogdan]

Ah, sorry, I completely missed the browser entry in package.json! I remember we honoring this, we'll take a look at why that doesn't work in this case. Reopening and marking this as a bug.

[lbogdan]

Update: after @CompuIves took a look at it, we're indeed honoring the browser entry, the bug seems to be related to the code in /dist/object_hash.js .

[eps1lon]

Update: after @CompuIves took a look at it, we're indeed honoring the browser entry, the bug seems to be related to the code in /dist/object_hash.js .

I updated my initial post to clarify what I meant with "locally":

Edit: What I meant by locally is that that I can download the sandbox, start it locally and it does not crash in the browser.

So there is a difference between webpack and sandpack. object-hash is running in the browser if bundled by webpack with a config from react-scripts.

To further confirm this:
https://codesandbox.io/s/km98l3mx3
It's a vanilla sandbox that loads https://unpkg.com/[email protected]/dist/object_hash.js with a script tag.

[lbogdan]

Coincidentally, it's also working with our new packager, which we're yet to switch to. We'll let you know as soon as we have any updates on that!

[github-actions[bot]]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[eps1lon]

Confirmed that the issue still exists.

[SaraVieira]

Closing this as I just confirmed newer versions of the library work confirming what Bogdan said that we do support the browser option but there was a problem in that specific version

Hope this makes sense to you

[eps1lon]

@SaraVieira That doesn't make sense to me. The codesandbox linked in the initial issue description still reproduces the original error with codesandbox version 7bf3f2414.

[lbogdan]

@eps1lon I guess what @SaraVieira was trying to say is that it works with a newer version of object-hash: https://codesandbox.io/s/object-hash-forked-u1zw1 .

[SaraVieira]

Yes, sorry. What I mean is that it works with newer versions of object hash

It was an issue with that specific version that's old