fix: export cjs/esm/umd modules explicitly

[laustdeleuran]

Marked version: 4.2.12

Markdown flavor: n/a

Description

• Fixes module import/export issue #2265 (already marked resolved, but I, and several others, are still seeing variations of this issue)

Expectation

Including marked in a subpackage should work as expected.

Result

I wish I had a more reproducible setup.

In short, we have a monorepo using pnpm. I have a package in that repo that uses marked. The file in question looks something like:

import DOMPurify from 'isomorphic-dompurify';
import { marked } from 'marked';

marked.use({
  renderer: {
    /* ...some options here */
  },
});

export const format = (markdown: string) =>
  DOMPurify.sanitize(marked.parse(markdown, { breaks: true }));

That package compiles that to CJS, which ends up looking something like:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.format = void 0;

var _isomorphicDompurify = _interopRequireDefault(require("isomorphic-dompurify"));

var _marked = require("marked");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

_marked.marked.use({
  renderer: {
    /* ...some options here */
  }
});

const format = markdown => _isomorphicDompurify.default.sanitize(_marked.marked.parse(markdown, {
  breaks: true
}));

exports.format = format;

That module then gets imported in another project in the monorepo, which is a create-react-app. I'm trying to upgrade the react-scripts in that project, which means I'm also upgrading from Webpack 4 to Webpack 5. That upgrade is going smoothly, except for the above file now throwing the TypeError: Cannot read properties of undefined (reading 'use') error.

What was attempted

If I explicitly export the three generated files, which should be safe to mark as exports, I'm able to sidestep this issue in my downstream projects using resolve:

    "alias": {
      "marked": "marked/lib/marked.esm.js",
    },

Which in effect applies @emilmuller's wrokaround to Webpack 5.

Contributor

• Test(s) exist to ensure functionality and minimize regression (if no tests added, list tests covering this PR); or,
• no tests required for this PR.
• If submitting new feature, it has been documented in the appropriate places.

Committer

In most cases, this should be a different person than the contributor.

• CI is green (no forced merge required).
• Squash and Merge PR following conventional commit guidelines.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
marked-website	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 2, 2023 at 11:36PM (UTC)

[laustdeleuran]

question (non-blocking): I'm a little unsure on the naming here. Should the exports include file types?

[benmccann]

this seems like the wrong fix. I think you should figure out the root of your issue rather than introducing a workaround into marked

[laustdeleuran]

this seems like the wrong fix. I think you should figure out the root of your issue rather than introducing a workaround into marked

That's a fair critique. I was mainly just trying to illustrate more clearly what the workaround was.

But, I don't think this really falls into introducing a workaround into marked itself. I'm just exposing files that are already available to consumers.

But your point still stands.