Getting "This is not a web-friendly file type" when trying to bundle micromark with esbuild and use in a browser

[talentlessguy]

Hello, I'm the author of hypermdx that uses remark-parse that depends on micromark. I tried import hypermdx in a browser:

import hypermdx from 'https://cdn.skypack.dev/hypermdx';

and came across with this error:

Uncaught Error: This is not a web-friendly file type and cannot be imported. (Imported by "parse-entities").

after further investigation I found out that the issue is caused by micromark.

attempting to import micromark results in the same error:

import micromark from 'https://cdn.skypack.dev/micromark';

I looked in the "Source" tab in Firefox and this is what I saw:

/*
 * This is not a web-friendly file type and cannot be imported. (Imported by "parse-entities").
 *
 * The package "parse-entities" is attempting to import "character-entities",
 * but this is not a JavaScript module.
 *
 * How to fix:
 *   - Share your feedback if you'd like to see non-JS import support added to Skypack: https://github.com/skypackjs/skypack-cdn/issues/107
 *   - Use https://skypack.dev/ to find another web-friendly alternative to find another package.
 */

throw new Error("This is not a web-friendly file type and cannot be imported. (Imported by \"parse-entities\").");
export default null;

Weirdly enough, both character-entities and parse-entities import fine. But something happens in micromark that it breaks...

my question is, is it a micromark, character-entities or a skypack issue? I also tried esbuild.vercel.app (and bundling with esbuild locally) and it resulted in the same error.

Possible solution

I'm still not sure what's causing that but possibly adding exports or "module" field to https://github.com/wooorm/character-entities/blob/main/package.json could help but I don't know if it will break anything or not.

[wooorm]

• This seems like a skypack error to me: millions of users are using micromark and parse-entities fine. For what its worth, the skypack authors are also using micromark in several projects. So it might be solved by configuration: to allow JSON to be imported
• The module field is non-standard. It could be that skypack depends on it, but it shouldn’t
• Note that I’m in the process of updating everything to ESM. The character-entities and parse-entities you see have already been updated, but micromark hasn’t, so be wary of that you might see code which isn’t used yet

[wooorm]

working on it!

[wooorm]

should be solved: https://github.com/micromark/micromark/releases/tag/3.0.3

[talentlessguy]

@wooorm yay it works! now some libs have to update micromark

thank u !

[wooorm]

which ones? remark plugins? if so, working on it!

[talentlessguy]

@wooorm yup i meant them