Importing Solid.js (and Preact) from unpkg, jspm, ESM.sh, and skypack CDNs

[trusktr]

Describe the bug

Currently Solid is not importable via JSPM or UNPKG.

This also happens to any packages using a similar package layout as Solid.js or Preact.

These two import examples don't work:

• JSPM: https://codepen.io/trusktr/pen/JjLarMd?editors=0010
• UNPKG: https://codepen.io/trusktr/pen/zYWJEpg?editors=0010

These ones work though:

• Skypack: https://codepen.io/trusktr/pen/XWEPezL?editors=0010
• ESM.sh: https://codepen.io/trusktr/pen/WNJeMbj?editors=0010

Your Example Website or App

https://codepen.io/trusktr/pen/JjLarMd?editors=0010

Steps to Reproduce the Bug or Issue

1. Open one of the non-working links
2. notice in console the browser was unable to load the ES modules

Expected behavior

Solid should be importable with all ES module CDNs.

Screenshots or Videos

No response

Platform

Any platform

Additional context

We would need to make some minor changes to Solid's code layout structure to make it align more closely with conventional ES module layouts libraries use.

We borrowed this pattern from Preact. Preact doesn't have an issue in JSPM:

https://codepen.io/trusktr/pen/BarOwxY?editors=0010

But UNPKG still fumbles on Preact:

https://codepen.io/trusktr/pen/VwXGMdm?editors=0010

The main difference I see between Solid and Preact in this regard is that a package preact/foo does not import from any other preact/bar package.

In Solid, solid-js/html imports from solid-js/web, which seems to be where JSPM stumbles.

UNPKG is not aware of Node ESM format, it was designed with vanilla (browser) ESM functionality and rules in mind, and hence it does less transformations of the source code and less mapping from one location to the next.

Related issues:

• support for package.json exports field (Node ESM) mjackson/unpkg#286
• Some valid Node ESM packages can't be imported from jspm.dev jspm/project#207

---

cc @developit, Preact author; @mjackson, UNPKG author; and @guybedford, JSPM author. 👋

Perhaps we can ideate the best ways to make these packages work in all the CDNs. There are two main paths we can take if not both:

• re-structure packages to use a simpler setup
• update CDNs to better handle Node ESM format

[rschristian]

Jovi replied in the Preact issue, but thought I'd copy it here as well: preactjs/preact#2564 (comment)

Unpkg trips over a few different things today (as that comment provides links to) that are somewhat less than ergonomic to workaround. However, they're quite difficult issues and therefore unlikely to get fixed any time in the near future; they're problems intrinsic to the platform at this point. Generally, we've taken to just suggesting alternatives like https://skypack.dev.

[kidonng]

The JSPM demo is working now.

I would also like to mention https://esm.sh/, though for some reason it is not working in CodeSandbox.

[trusktr]

Generally, we've taken to just suggesting alternatives like https://skypack.dev.

Another option could be for the libs to adopt a simpler package layout without nested package.json files and whatnot.

[trusktr]

The JSPM demo is working now.

Nice!

Cool, Solid is working with ESM.sh, https://codepen.io/trusktr/pen/WNJeMbj?editors=0010. I updated the OP.

[rschristian]

Another option could be for the libs to adopt a simpler package layout without nested package.json files and whatnot.

While that was added before "exports" was (somewhat) standardized, it does still perform the valuable role of supporting subpath exports in older tools. The "simpler layout" doesn't come without a cost and is almost certainly a breaking change.

[ryansolid]

Yeah I don't know there is anything to add here. We aren't going to change the repo structure for unpkg and there are other alternatives. All the options other than unpkg seems to work(including JSPM).

Every linked issue except adding "export" support to unpkg is closed at this point. So it doesn't seem like this issue is moving anywhere and any further progress should be tracked with unpkg.