I'm trying to build a markdown previewer using react and the marked node package. Everything works up to when I try to parse any markdown on the DOM. When I do I get an error message: Uncaught TypeError: marked is not a function.

I have marked declared at the top of the file like this:

import { useState } from "react";
import "./App.css";
const marked = require("marked");

I also tried declaring marked like this:

import { useState } from "react";
import "./App.css";
const { marked } = require("marked");

But this didn't seem make a difference.

This is my code configuration:

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked(mrkdwn),
              }}
            ></div>
          </div>

I've also tried:

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked.parse(mrkdwn),
              }}
            ></div>
          </div>

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked.parser(mrkdwn),
              }}
            ></div>
          </div>

and

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked.Parser(mrkdwn),
              }}
            ></div>
          </div>

However, I've also gotten similar error messages with these attempts as well, only in these cases the messages say .Parser, .parse, .parser, etc., is not a function.

If you need to see anymore code, please let me know.

I haven't been able to find a solution in any of my Googling. It's possible there's something out there I missed.

Any help would be greatly appreciated.

Thank you in advance.

I'm trying to build a markdown previewer using react and the marked node package. Everything works up to when I try to parse any markdown on the DOM. When I do I get an error message: Uncaught TypeError: marked is not a function.

I have marked declared at the top of the file like this:

import { useState } from "react";
import "./App.css";
const marked = require("marked");

I also tried declaring marked like this:

import { useState } from "react";
import "./App.css";
const { marked } = require("marked");

But this didn't seem make a difference.

This is my code configuration:

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked(mrkdwn),
              }}
            ></div>
          </div>

I've also tried:

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked.parse(mrkdwn),
              }}
            ></div>
          </div>

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked.parser(mrkdwn),
              }}
            ></div>
          </div>

and

            <div className="preview-label">Preview</div>
            <div
              id="preview"
              className="preview-area"
              dangerouslySetInnerHTML={{
                __html: marked.Parser(mrkdwn),
              }}
            ></div>
          </div>

However, I've also gotten similar error messages with these attempts as well, only in these cases the messages say .Parser, .parse, .parser, etc., is not a function.

If you need to see anymore code, please let me know.

I haven't been able to find a solution in any of my Googling. It's possible there's something out there I missed.

Any help would be greatly appreciated.

Thank you in advance.

• javascript
• react-hooks
• javascript-marked

• 1 Where is marked declared? It appears to be undefined in your snippets. stackoverflow.com/help/minimal-reproducible-example – Drew Reese Commented Jan 9, 2022 at 22:53

2 Answers 2

I found that I'm supposed to import marked like this:

import { marked } from 'marked'

this was what worked for me.

const { marked } = require('marked');