marked import error

[yaldram]

Marked version: 4.0.17

Describe the bug I am using react with create-react-app, webpack version 5. When I import marked like - import { marked } from "marked"; I get the following error : -

To Reproduce Steps to reproduce the behavior:

• Clone the repository - https://github.com/appsmithorg/appsmith.
• Run cd app/client.
• Run git checkout dependentbot-updates
• Run yarn install
• Run yarn start

Expected behavior A clear and concise description of what you expected to happen.

[yaldram]

I had to import marked using commonjs like so - const { marked } = require("marked").

[yaldram]

When I import const { marked } = require('marked') I get a runtime error saying - marked is not a function. I am unable to use version 4.0 and above due to the above error. Can you please suggest a workaround sir @UziTech, thanks.

[UziTech]

What do you get when you log the output of require('marked')?

[yaldram]

@UziTech sir, using const { marked } = require('marked') returns undefined. Using const marked = require('marked') returns /static/media/marked.af4dd239aa577a4f71e4.cjs.

[UziTech]

I tried with a new cra app and import { marked } from 'marked' seems to work fine. Can you create a minimal repo that reproduces it?

steps to reproduce:

1. create folder on desktop
2. open terminal in that folder
3. run npx create-react-app .
4. run npm i marked
5. edit src/App.js
   1. add import { marked } from 'marked';
   2. add console.log(marked('# test'));
6. run npm start
7. open console and see <h1 id="test">test</h1>

[UziTech]

const marked = require('marked') returns /static/media/marked.af4dd239aa577a4f71e4.cjs.

This seems like an issue in your application that require is returning a path instead of importing. Most likely require is getting overridden somewhere (could be inside webpack or CRA). I don't think there is anything we can change in marked to fix it. You might want to create an issue on the CRA repo.

[yaldram]

@UziTech thanks a lot, i tried with a create-react-app and it is working as expected, I will check with webpack config. Thanks for your time.

[yaldram]

@UziTech sir, don't you think the commonjs import should work I created a new create-react-app even there I get the output as mentioned above, but importing other libraries using commonjs syntax works as expected.

[UziTech]

commonjs import seems to work for me (demo). It looks like the issue is somewhere in create-react-app.

[yaldram]

Yes there is some issue with create-react-app. We have finally resolved this error by adding this babel helper @babel/helper-create-regexp-features-plugin as a devDependency.