documentation to show ESM import and usage #1692

henriquez · 2020-05-31T01:41:35Z

Describe the bug
I'm using rollup to bundle dependencies (for a Svelte framework web app) but having trouble importing and using markedjs. It appears the library was recently ported to ESM modules, but I don't see any documentation on how to use as such. The standard syntax to import ES6 modules give me errors:

import { marked } from 'marked.esm';
returns
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
marked.esm (imported by src/parser/parser.js)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
marked.esm (guessing 'marked')

and

import { marked } from 'marked';
returns
bundles src/main.js → public/build/bundle.js...
(!) this has been rewritten to undefined
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/marked/lib/marked.js
14: typeof define === 'function' && define.amd ? define(factory) :
15: (global = global || self, global.marked = factory());
16: }(this, (function () { 'use strict';
^
17:
18: function _defineProperties(target, props) {
[!] Error: 'marked' is not exported by node_modules/marked/lib/marked.js, imported by src/parser/parser.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/parser/parser.js (11:9)

To Reproduce
npm install marked

in a Svelte js file that's bundled by rollup:
import { marked } from 'marked'; // or similar variations

Expected behavior
no import errors

The text was updated successfully, but these errors were encountered:

KilianKilmister · 2020-05-31T07:23:59Z

marked.esm is using a default export instead of a named export. so the proper syntax would be:

import marked from 'marked' // note that this is a definition, so you can give it any name you want

But i think you are raising an important point: Why was a default export chosen over a named export? It removes many of the advantages of using esm. As the result is still just some convoluted mess of properties.

It would be much more userfriendly with well organized named exports as they work excellently with TS-language-features.

I'll file a seperate issue about that in a bit

henriquez · 2020-05-31T17:58:54Z

I tried that syntax as well, but errors with "'default' is not exported by node_modules/marked/lib/marked.js" detail below:

bundles src/main.js → public/build/bundle.js... (!) thishas been rewritten toundefined https://rollupjs.org/guide/en/#error-this-is-undefined node_modules/marked/lib/marked.js 14: typeof define === 'function' && define.amd ? define(factory) : 15: (global = global || self, global.marked = factory()); 16: }(this, (function () { 'use strict'; ^ 17: 18: function _defineProperties(target, props) { [!] Error: 'default' is not exported by node_modules/marked/lib/marked.js, imported by src/parser/parser.js https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module src/parser/parser.js (10:7) 8: 9: /*************** Imports *****************/ 10: import marked from 'marked';'

Looking at lib/marked.esm.js#L2356 it exports default, but if I try
import marked from 'marked_esm';
that errors with
(!) Unresolved dependencies https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency marked_esm (imported by src/parser/parser.js) (!) Missing global variable name Use output.globals to specify browser global variable names corresponding to external modules marked_esm (guessing 'marked')
and in my js I get

Uncaught ReferenceError: marked is not defined

with
marked.lexer('# heading');

UziTech · 2020-06-01T03:40:39Z

have you tried import marked from "marked/lib/marked.esm.js";?

henriquez · 2020-06-07T00:39:31Z

Yes, that errors with "marked is not defined". Short term I'll just add the library from an html script tag, but would be nice if modules worked.

…

On Sun, May 31, 2020 at 8:40 PM Tony Brix ***@***.***> wrote: have you tried import marked from marked/lib/marked.esm.js? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1692 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAADAOG7IRJJFJVOXBU64ULRUMPMHANCNFSM4NO6IQ2A> .

UziTech · 2020-06-07T20:11:53Z

I don't usually use esm since it is still experimental in node. If anyone wants to create a PR I would be happy to review it.

evanplaice · 2020-07-04T02:10:26Z

Here's the usage

import Marked from '../node_modules/marked/lib/marked.esm.js'

Marked(rawMarkdown)

I'm using it in the <wc-markdown> web component

KilianKilmister · 2020-07-09T11:02:27Z

cjs-require/esm-import can be automatically handled by specifying an "exports" field in the package.json.
This way node will load the appropriate files without the user having to worry about in-module paths.

Short explanation

{
  "exports": {
    [exportPath]: {
      "import": "./path/to/file.mjs",
      "require": "./path/to/file.cjs"
    }
  }
}

So for marked it would be:

{
  "exports": {
    ".": {
      "import": "./lib/marked.esm.mjs", // `.mjs`-extention is needed
      "require": "./src/marked.js"
    }
  }
}

I'll file a PR for that shortly

Signed-off-by: kilian <kilian@catsoft.com>

hatboysam · 2021-01-01T12:50:54Z

Ran into this issue today building my site with Vue 2 and the Vue CLI. Been developing locally for months and using marked heavily, in my Vue component I had:

import marked from "marked";

When I deployed to production this exploded, marked was not available. Had to replace it with:

const marked = require("marked");

Took me a while to figure this out.

UziTech · 2021-01-03T02:20:00Z

I just tried it and it works to import in node v14

// index.js
import marked from "marked";
console.log(marked("# test"));
// <h1 id="test">test</h1>

It might be different if you are using a bundler.

jamesb93 · 2021-04-26T13:41:11Z

I think this is related but in SvelteKit next.89 I now get errors when importing marked that I didn't get before and is a complex problem in consideration of SSR.

    import marked from 'marked';

results in:

[vite] Error when evaluating SSR module /node_modules/.pnpm/marked@2.0.3/node_modules/marked/src/marked.js:
ReferenceError: require is not defined
    at /node_modules/.pnpm/marked@2.0.3/node_modules/marked/src/marked.js:1:15
    at instantiateModule (/Users/james/dev/webdev/phd-kit/node_modules/.pnpm/vite@2.2.3/node_modules/vite/dist/node/chunks/dep-994e0558.js:69063:166)
Line must be greater than or equal to 1, got -1
TypeError: Line must be greater than or equal to 1, got -1
    at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (/Users/james/dev/webdev/phd-kit/node_modules/.pnpm/vite@2.2.3/node_modules/vite/dist/node/chunks/dep-994e0558.js:67940:13)
    at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (/Users/james/dev/webdev/phd-kit/node_modules/.pnpm/vite@2.2.3/node_modules/vite/dist/node/chunks/dep-994e0558.js:68009:22)
    at /Users/james/dev/webdev/phd-kit/node_modules/.pnpm/vite@2.2.3/node_modules/vite/dist/node/chunks/dep-994e0558.js:68969:34
    at String.replace (<anonymous>)
    at /Users/james/dev/webdev/phd-kit/node_modules/.pnpm/vite@2.2.3/node_modules/vite/dist/node/chunks/dep-994e0558.js:68959:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (/Users/james/dev/webdev/phd-kit/node_modules/.pnpm/vite@2.2.3/node_modules/vite/dist/node/chunks/dep-994e0558.js:68958:10)
    at Object.ssrFixStacktrace (/Users/james/dev/webdev/phd-kit/node_modules/.pnpm/vite@2.2.3/node_modules/vite/dist/node/chunks/dep-994e0558.js:69215:27)
    at Object.handle_error (file:///Users/james/dev/webdev/phd-kit/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.89_svelte@3.37.0+vite@2.2.3/node_modules/@sveltejs/kit/dist/chunks/index.js:3317:19)
    at respond$1 (file:///Users/james/dev/webdev/phd-kit/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.89_svelte@3.37.0+vite@2.2.3/node_modules/@sveltejs/kit/dist/ssr.js:956:11)

This problem does not happen if I navigate to the page which uses marked from another page. If I go there directly the problem is 100% reproducible.

UziTech · 2021-11-10T16:17:02Z

This wsa fixed in #2227

stolinski · 2021-11-21T17:55:36Z

I'm still seeing some weirdness here on the latest. (4.0.4)

Code compile fine, works in browser, VSCode shows this.

This is a repo/file in question https://github.com/leveluptuts/auto-form/blob/main/src/lib/Markdown.svelte

UziTech · 2021-11-21T19:49:43Z

@stolinski it doesn't look like you have @types/marked installed in that repo.

My guess is without the actual types Typescript is assuming it is a cjs module because main points to a .cjs file.

GhislainMitahi · 2022-02-09T14:30:01Z

Hi you all, i need to import ans use marked in my react project, so when i compile this is the message it gives me, some one can help me please :

export 'default' (imported as 'Marked') was not found in 'marked' (possible exports: Lexer, Parser, Renderer, Slugger, TextRenderer, Tokenizer, defaults, getDefaults, lexer, marked, options, parse, parseInline, parser, setOptions, use, walkTokens)

UziTech · 2022-02-09T14:37:45Z

Use import { marked } from 'marked' like the error says marked doesn't have a default export.

UziTech added the category: docs Documentation changes label Jun 1, 2020

UziTech added the good first issue Something easy to get started with label Jul 8, 2020

KilianKilmister pushed a commit to KilianKilmister/marked that referenced this issue Jul 9, 2020

added "exports"-field markedjs#1692

6248b0a

Signed-off-by: kilian <kilian@catsoft.com>

KilianKilmister mentioned this issue Jul 9, 2020

Added "exports"-field to package.json so import/require loads the appropriate file without any additional user-input #1725

Closed

6 tasks

evanplaice mentioned this issue Apr 28, 2021

Update 'marked' import vanillawc/wc-markdown#14

Closed

UziTech closed this as completed Nov 10, 2021

bonartm mentioned this issue Mar 20, 2022

Installation issues bonartm/quizdown-js#23

Closed

This was referenced Mar 28, 2022

Add markdown tabs fullstack-lang/gongfly#9

Closed

Angular compilation when importing ngx-markdown 'Error: export 'Renderer' (reexported as 'MarkedRenderer') was not found in 'marked' (module has no exports)' jfcere/ngx-markdown#375

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

documentation to show ESM import and usage #1692

documentation to show ESM import and usage #1692

henriquez commented May 31, 2020 •

edited

KilianKilmister commented May 31, 2020

henriquez commented May 31, 2020

UziTech commented Jun 1, 2020 •

edited

henriquez commented Jun 7, 2020 via email

UziTech commented Jun 7, 2020

evanplaice commented Jul 4, 2020

KilianKilmister commented Jul 9, 2020 •

edited

hatboysam commented Jan 1, 2021

UziTech commented Jan 3, 2021 •

edited

jamesb93 commented Apr 26, 2021

UziTech commented Nov 10, 2021

stolinski commented Nov 21, 2021 •

edited

UziTech commented Nov 21, 2021 •

edited

GhislainMitahi commented Feb 9, 2022 •

edited

UziTech commented Feb 9, 2022

documentation to show ESM import and usage #1692

documentation to show ESM import and usage #1692

Comments

henriquez commented May 31, 2020 • edited

KilianKilmister commented May 31, 2020

henriquez commented May 31, 2020

UziTech commented Jun 1, 2020 • edited

henriquez commented Jun 7, 2020 via email

UziTech commented Jun 7, 2020

evanplaice commented Jul 4, 2020

KilianKilmister commented Jul 9, 2020 • edited

Short explanation

So for marked it would be:

hatboysam commented Jan 1, 2021

UziTech commented Jan 3, 2021 • edited

jamesb93 commented Apr 26, 2021

UziTech commented Nov 10, 2021

stolinski commented Nov 21, 2021 • edited

UziTech commented Nov 21, 2021 • edited

GhislainMitahi commented Feb 9, 2022 • edited

UziTech commented Feb 9, 2022

henriquez commented May 31, 2020 •

edited

UziTech commented Jun 1, 2020 •

edited

KilianKilmister commented Jul 9, 2020 •

edited

UziTech commented Jan 3, 2021 •

edited

stolinski commented Nov 21, 2021 •

edited

UziTech commented Nov 21, 2021 •

edited

GhislainMitahi commented Feb 9, 2022 •

edited