Plugins in react markdown with next.js does not work

I have a project that uses next.js in the frontend and strapi in the backend. For rendering the reach text of strapi that uses markdown, I use ReactMarkdown package version "6.0.3", in the frontend.

It works well - except the strikethrough and the underline. For the strikethrough to work (for now it just render a text like that: ~~some text to delete~~), I need to add a plugin that called remarkgfm or gfm, and for the underline - it just showing some text tag and not underline text, and for that to work I need to add a plugin that called rehype-raw. thats from the documentation:

Appendix A: HTML in markdown react-markdown typically escapes HTML (or ignores it, with skipHtml) because it is dangerous and defeats the purpose of this library. However, if you are in a trusted environment (you trust the markdown), and can spare the bundle size (±60kb minzipped), then you can use rehype-raw:

and that is because it is not translate html directly.

this is my code:

import ReactMarkdown from 'react-markdown'
import gfm from 'remark-gfm'
import remarkGfm from 'remark-gfm'


import style from './single-paragraph.module.scss'

const SingleParagraph = ( { subTitle, text, image, floatPosition } ) => {
  
  const styleRow = {display: 'flex', flexDirection: 'row', alignItems: 'start'}
  const styleRowReverse = {display:'flex', flexDirection: 'row-reverse', alignItems: 'start'}
return (
    <div className={style.container}>
      {subTitle && <h3 className={style.sub_title}>{subTitle}</h3>}
      <div className={style.text_container}>
          <div style={floatPosition==='end' ? styleRow : styleRowReverse} className={style.flex}>
          {text &&
            <ReactMarkdown 
              className={style.text} 
              linkTarget={ (href) => href.startsWith('http') ? "_blank" : "_self" }
              remarkPlugins={[remarkGfm]} 
            >{text}</ReactMarkdown> 
          }
          {image && <img src={image.url} width={image.width} height={image.height} alt="image" className={style.img}/>}
        </div>
      </div>
      
    </div>
  )
}

export default SingleParagraph

but then it gives me the following error:

TypeError: Cannot read properties of undefined (reading '2')

I tried to add this to next.config.js as this discussion suggested https://github.com/vercel/next.js/issues/25454 :

const withTM = require("next-transpile-modules")([
  "react-markdown",
  "remark-gfm",
  "micromark-extension-gfm",
  "micromark-util-combine-extensions",
  "micromark-util-chunked",
  "micromark-util-character",
  "micromark-util-sanitize-uri",
  "micromark-util-encode",
  "micromark-util-classify-character",
  "micromark-util-resolve-all",
  "micromark-factory-space",
  "mdast-util-gfm",
  "ccount",
  "mdast-util-find-and-replace",
  "unist-util-visit-parents",
  "unist-util-is",
  "mdast-util-to-markdown",
  "markdown-table",
]);

module.exports = withTM({ webpack5: false });

and then in my file import markdown with:

import Markdown from 'react-markdown/react-markdown.min'

but is still gives that error, what I am doing wrong with the configuration?

Solution 1:

I can't speak to your errors and I recognize you've attempted to leverage plugins to overcome your ins or del issues.

However, the remark markdown processor supports the CommonMark specification which does not include support for ins or del tags. Presumably the react-markdown component and the plugins are subject to CommonMark limitations: