title: Plugins in react markdown with next.js does not work
body: <p>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 &quot;6.0.3&quot;, in the frontend.</p>
  <p>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:</p>
  <blockquote>
  <p>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:</p>
  </blockquote>
  <p>and that is because it is not translate html directly.</p>
  <p>this is my code:</p>
  <pre><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 } ) =&gt; {
    
    const styleRow = {display: 'flex', flexDirection: 'row', alignItems: 'start'}
    const styleRowReverse = {display:'flex', flexDirection: 'row-reverse', alignItems: 'start'}
  return (
      &lt;div className={style.container}&gt;
        {subTitle &amp;&amp; &lt;h3 className={style.sub_title}&gt;{subTitle}&lt;/h3&gt;}
        &lt;div className={style.text_container}&gt;
            &lt;div style={floatPosition==='end' ? styleRow : styleRowReverse} className={style.flex}&gt;
            {text &amp;&amp;
              &lt;ReactMarkdown 
                className={style.text} 
                linkTarget={ (href) =&gt; href.startsWith('http') ? &quot;_blank&quot; : &quot;_self&quot; }
                remarkPlugins={[remarkGfm]} 
              &gt;{text}&lt;/ReactMarkdown&gt; 
            }
            {image &amp;&amp; &lt;img src={image.url} width={image.width} height={image.height} alt=&quot;image&quot; className={style.img}/&gt;}
          &lt;/div&gt;
        &lt;/div&gt;
        
      &lt;/div&gt;
    )
  }
  
  export default SingleParagraph
  </code></pre>
  <p>but then it gives me the following error:</p>
  <pre><code>TypeError: Cannot read properties of undefined (reading '2')
  </code></pre>
  <p>I tried to add this to next.config.js as this discussion suggested
  <a href="https://github.com/vercel/next.js/issues/25454" rel="nofollow noreferrer">https://github.com/vercel/next.js/issues/25454</a>
  :</p>
  <pre><code>const withTM = require(&quot;next-transpile-modules&quot;)([
    &quot;react-markdown&quot;,
    &quot;remark-gfm&quot;,
    &quot;micromark-extension-gfm&quot;,
    &quot;micromark-util-combine-extensions&quot;,
    &quot;micromark-util-chunked&quot;,
    &quot;micromark-util-character&quot;,
    &quot;micromark-util-sanitize-uri&quot;,
    &quot;micromark-util-encode&quot;,
    &quot;micromark-util-classify-character&quot;,
    &quot;micromark-util-resolve-all&quot;,
    &quot;micromark-factory-space&quot;,
    &quot;mdast-util-gfm&quot;,
    &quot;ccount&quot;,
    &quot;mdast-util-find-and-replace&quot;,
    &quot;unist-util-visit-parents&quot;,
    &quot;unist-util-is&quot;,
    &quot;mdast-util-to-markdown&quot;,
    &quot;markdown-table&quot;,
  ]);
  
  module.exports = withTM({ webpack5: false });
  </code></pre>
  <p>and then in my file import markdown with:</p>
  <pre><code>import Markdown from 'react-markdown/react-markdown.min'
  </code></pre>
  <p>but is still gives that error,
  what I am doing wrong with the configuration?</p>