Add ESM Import Compatibility

[evanplaice]

ESM is coming. It is already supported in most browsers and is coming to Node ¹.

With that said, there are few libraries that have native support for it yet. As far as Markdown parsers go:

• markdown-it is very heavily invested in CommonJS, ESM support will likely never happen there
• marked - had a contributor implement ESM support and the maintainers rejected the PR
• remark - also heavily invested in CommonJS
• markdown-js - looks like it's no longer being maintained

Long-story-short, unless somebody starts a 'clean room' implementation of a Markdown parser in ES this is going to be a pain point for FE devs working in native ESM.

I've been experimenting a bit and managed to create a PR that adds support with very minimal impact on the existing codebase.

¹ I'm a participant on the Node/Modules work group. If all goes well, we may see unflagged support before the end of the year.

[tivie]

Thanks for your contribution. I will have a look as soon as possible, when I have the time.

[Justsnoopy30]

It still seems there is not ESM compatibility for Showdown in 2020.

[Gillardo]

Is this coming?

[tirithen]

Any updates on ESM compatability?

[Marshal27]

+1

the dist in closed PR 661 so far works well.

[LeaVerou]

Another vote for ESM here. I love Showdown, but had to switch away from it for my modules because I can't distribute libraries that leak into the global scope. 😞

[wojteko22]

I'm also waiting for this and starting to think about switching library.

[Gillardo]

yeah i think i may have to switch if this doesnt happen soon, which is a shame as i like this library, no idea what to change to either

[jessejohnson]

Does anyone have an alternative that has ESM Import compat? It's 2023 and I can't seem to find any. :(

@LeaVerou what did you switch to?

[taorepoara]

Here is the way to import this lib in an ESM:

import Showdown from 'showdown';

[TheDogHusky]

Hello! If I downloaded showdown.min.js, on an Expressjs server, how can I do the import? Currently I have a script /static/script/ticketManager.js that needs showdown. Showdown is located in the same directory as ticketManager. When I try to import import showdown from "/static/script/showdown.min.js", it says that it doesn't have default export. (the same happens if I do import showdown from "./showdown.min.js".

[TheDogHusky]

Is there no esm support for browser?

[suhli]

not working with import() function

demo

TypeError: Cannot set properties of undefined (setting 'showdown')
    at https://cdn.jsdelivr.net/npm/showdown@latest/dist/showdown.min.js:2:72031
    at https://cdn.jsdelivr.net/npm/showdown@latest/dist/showdown.min.js:2:72035

---

just using jsDeliver /+esm path or esm.run

(async () => {
  try {
    const Showdown = await import("https://cdn.jsdelivr.net/npm/showdown/+esm");
    const converter = new Showdown.default.Converter();
    document.querySelector("#d").innerHTML = converter.makeHtml(
      `# showdown.js`
    );
  } catch (e) {
    console.error(e.stack);
  }
})();

[bgoosmanviz]

For the TypeScript fans:

Install showdown

yarn add showdown

showdown.d.ts

declare module 'showdown' {
  class Converter {
    constructor();
    makeHtml(text: string): string;
  }

  export { Converter };
}

MyComponent.tsx

import showdown from 'showdown';

[KeithHenry]

This is a 5 year old problem but it now is a complete block - I can't even consider using this library without ESM support.

Another vote for ESM here. I love Showdown, but had to switch away from it for my modules because I can't distribute libraries that leak into the global scope. 😞

@LeaVerou I realise this from 4 years ago, but please let us know you used instead?

Everyone else: has anyone forked this to make a modern ESM compatible version?

[kurmasz]

The error below can be fixed by adding a failover to globalThis. I'm working on a PR now.

TypeError: Cannot set properties of undefined (setting 'showdown') at https://cdn.jsdelivr.net/npm/showdown@latest/dist/showdown.min.js:2:72031 at https://cdn.jsdelivr.net/npm/showdown@latest/dist/showdown.min.js:2:72035

[kurmasz]

This PR should fix the main problem: https://github.com/showdownjs/showdown/pull/1017

[KeithHenry]

This PR should fix the main problem: #1017

That's a patch for being able to run in ESM, but it still loads as a side effect attached to the globalThis.

Where @LeaVerou said:

I can't distribute libraries that leak into the global scope. 😞

For this to be consumed by ESM libraries it needs to load as a module:

import { showdown } from './showdown.esm.js';

// Scoped to module
const converter = new showdown.Converter();

// Must not leak into window or self
if(globalThis.showdown)
    throw new ('Global scope polluted',);

This allows my library to require import { showdown } from './v1/showdown.esm.js' and someone else's to load import { showdown } from './v2/showdown.esm.js' (or even import { showdown } from './unrelatedLibraryWithSimilarName.js') and not get nasty bugs depending on loading order.

[csisy]

@KeithHenry I was just looking for an alternative. Not sure if it fits your needs, but markedjs/marked seems to be a good one.