How does Codesandbox consume libraries?

[advename]

I wasn't able to find any documentation about this, but I was wondering, as a library author, what module system and package.json fields are required by a library in order to work on Codesandbox?

I would imagine that you use the package.json's module field that points to an ESM bundle?

[sannek]

Hi,

Just to clarify, do you mean to run examples for the library in CodeSandbox, or to work on the library itself?

[sannek]

I don't think we require anything special from package.json to run - when it is present we use main to identify the entry file, and of course the (dev)dependencies to install them.

If you're running into trouble, please let me know what's specifically not working as expected, if you're mostly asking out of curiosity, I'll pass the question on to the folks who know the most about our bundler, but they're off for now, so probably won't get back to you until the new year.

[advename]

How does that then work in the browser to use the main, which commonly are CJS modules, in the browser?
Or maybe to rephrase it, how does Codesandbox support CJS dependencies in the browser?

And no, not running into trouble - I'm just trying to figure out what the requirements are.

[sannek]

Cool - in that case I will tag our main bundler developer @DeMoorJasper who - once he's back from vacation - can probably give you all the information you need.

If you want to create an example before then, I would suggest just trying with a package.json like you would for a local project and go from there. In most cases that should just work. (With the side note that if you need a server (Node etc), you should start from a container template such as this one).

[DeMoorJasper]

As an entrypoint of the sandbox we use the main field (some templates have additional strategies to resolve entrypoints in case main is missing or invalid), this can be CJS or ESM.

To make this work we collect all the dependencies of that entrypoint and transform/compile every module it encounters, after that is done we evaluate the entrypoint and inject require, import and some other globals, whenever require gets called that module gets evaluated until the entire application is loaded.

In dependencies/modules we support pretty much everything there is: exports, module, main, browser, ... with our preference going to exports and module as that is the new standard all modules should eventually adopt. We also support some other legacy things, but those are just supported for backwards compatibility and might get removed in the future.

As Sanne already noted, NodeJS code might not be work in these sandboxes, we have a bunch of polyfills to make most of it work, but it's usually better to use the container sandboxes which are built for the NodeJS use-cases.

[advename]

This was all i needed to know. I couldn't find any resource mentioning how Codesandbox supports npm libraries.

As Sanne already noted, NodeJS code might not be work in these sandboxes, we have a bunch of polyfills to make most of it work, but it's usually better to use the container sandboxes which are built for the NodeJS use-cases.

Thanks, but I only needed to know. I want to write some documentation how libraries are used across tools, e.g. UNPKG CDN as an example makes use of a custom unpkg field in the package.json file.