solid
solid copied to clipboard
Importing Solid.js (and Preact) from unpkg, jspm, ESM.sh, and skypack CDNs
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
- Open one of the non-working links
- 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:
- https://github.com/mjackson/unpkg/issues/286
- https://github.com/jspm/project/issues/207
cc @developit, Preact author; @mjackson, UNPKG author; and @guybedford, JSPM author. :wave:
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
Jovi replied in the Preact issue, but thought I'd copy it here as well: https://github.com/preactjs/preact/issues/2564#issuecomment-636201423
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.
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.
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.
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.
Another option could be for the libs to adopt a simpler package layout without nested
package.jsonfiles 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.
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.