module import/export issue

[paddotk]

Marked version: 4.0.0

Describe the bug I updated marked in our project from ^3.0.2 to 4.0.0 (before it worked fine), and after the update I get an error marked__WEBPACK_IMPORTED_MODULE_5___default(...) is not a function when using it. It seems that the module is no longer exported properly, I tried to change the import import { marked } from 'marked' as well as using marked.parse() as shown in the readme, but that doesn't seem to help.

To Reproduce Steps to reproduce the behavior: Use a webpack/npm project, import by means of import marked from 'marked'. Use the marked() function.

[laustdeleuran]

@UziTech @benmccann, my confidence in the Webpack maintainers getting back to us in a timely manner on this is decreasing.

According to @UziTech's analysis, it seems like @benmccann's earlier PR might have been on the right track. I wonder if it makes sense to see if that's a viable path forward, instead of waiting on @webpack to look at the issue on their end?

[UziTech]

That PR won't help in your case because webpack is not using main. It is using the require export from https://github.com/markedjs/marked/blob/6164fb62c02ad522a7c12a701053309195785c32/package.json#L24

If we change that to esm than no one could use marked as a commons module. I think the correct solution here is to fix it in webpack and use webpack v4 until it is fixed.

[UziTech]

Actually it looks like this might actually be a create-react-app issue instead of webpack. https://github.com/facebook/create-react-app/issues/12700

Either way working around it in marked doesn't seem like the right way to go.

There is a work around in the cra issue. I haven't tried it but that looks like a better work around.

[laustdeleuran]

Looping back around. I can confirm that this looks to be an issue in create-react-app.

There's some more context in https://github.com/facebook/create-react-app/issues/12700, including a couple of PRs to solve the issue, as well as a couple of workarounds.

[daniel-bergmann]

It looks like somewhere in your code you are trying to import the default export like import marked from 'marked'.

Make sure you replace all occurrences with import { marked } from 'marked'

This solved it for me

[scharf]

I am using Meteor, which has its own build system. Long story short: the only way I made it work was:

// @ts-ignore
import { marked } from 'marked/lib/marked.esm';

Not very satisfying, but it works.

[LassiterPrime]

Late to the party here, but ran into the same thing. The issue was the last 3 lines of marked.d.ts

Make the following changes:

Original

    export type * from "MarkedOptions";
    export type * from "rules";
    export type * from "Tokens";

Corrected

    export type { MarkedOptions } from "MarkedOptions";
    export type { Rules } from "rules";
    export type { Tokens } from "Tokens";

[davidsandoz]

I'm using marked with Nuxt.js v2 and also had some trouble importing the module after upgrading from v5.1.2 to v9.1.0.

I was importing the module in a Nuxt plugin with

import {marked} from 'marked';

And during the build I got

ERROR in ./node_modules/marked/lib/marked.umd.js 253:15
Module parse failed: Unexpected token (253:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|      */
|     class _Tokenizer {
>         options;
|         // TODO: Fix this rules type
|         rules;
 @ ./plugins/markdown.ts 4:13-30
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js

After trying out a lot of different potential solutions, what ended up making it work was to add marked to the transpile array of the build option in nuxt.config.ts:

build: {
  transpile: ['marked']
}

[mazemax]

Thanks @davidsandoz, following line solved this issue:

build: {
  transpile: ['marked']
}