title: NextJS: Render Markdown with table
body: <p>In my Nextjs project, I'm receiving some markdown through and API, and I need to display it in the Nextjs page.</p>
  <p>My code looks as follows:</p>
  <pre><code>import React from &quot;react&quot;
  import { GetServerSideProps } from &quot;next&quot;
  import ReactMarkdown from &quot;react-markdown&quot;
  import gfm from 'remark-gfm'
  import Layout from &quot;../../components/Layout&quot;
  import { PostProps } from &quot;../../components/Post&quot;
  import { server } from '../../config';
  
  const fetchSinglePostServer = async (id) =&gt; {
    const res = await fetch(server + '/api/post/' + id);
    return res.json();
  }
  
  
  export const getServerSideProps: GetServerSideProps = async ({ params }) =&gt; {
  
    const post = await fetchSinglePostServer(params.id);
      return {
        props: post,
      };
  };
  
  const Post: React.FC&lt;PostProps&gt; = (props) =&gt; {
    let title = props.title
  
  return (
      &lt;Layout title={title}&gt;
        &lt;main className=&quot;container mx-auto mt-6 px-2 dark:bg-gray-800&quot;&gt;
          &lt;div className=&quot;flex md:space-x-4 justify-center&quot;&gt;
            &lt;div className=&quot;mb-4&quot;&gt;
              &lt;h2 className=&quot;text-2xl font-bold my-2&quot;&gt;{title}&lt;/h2&gt;
                &lt;p className=&quot;mb-2&quot;&gt;By {props?.author?.name || &quot;Unknown author&quot;}&lt;/p&gt;
                &lt;div className=&quot;prose lg:prose-lg&quot;&gt;
                  &lt;ReactMarkdown remarkPlugins={[gfm]}&gt;{props.markdown}&lt;/ReactMarkdown&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/main&gt;
      &lt;/Layout&gt;
    )
  }
  
  export default Post
  </code></pre>
  <p>This whole code works great WITHOUT <code>remarkPlugins={[gfm]}</code>.</p>
  <p>However, my markdown contains a table and to display that table I need to use this plugin.</p>
  <p>Using this plugin breaks the page. I receive <code>Server Error TypeError: Cannot read property '2' of undefined</code></p>
  <p>I'm looking for solution to display this api-received markdown content in my nextjs page when the markdown contains table also.</p>
  <p>My Sample markdow:</p>
  <pre><code>This is an example post, with a [link](https://nextjs.org) and a React component:
    
    The title and description are pulled from the MDX file and processed using gray-matter. Additionally, links are rendered using a custom component passed to next-mdx-remote.
    
    Go back [home](/).
    
    # Table
  
    | Branch  | Commit           |
    | ------- | ---------------- |
    | main    | 0123456789abcdef |
    | staging | fedcba9876543210 |
  </code></pre>