ReactMarkdown + remarkGfm: everything renders as expected, EXCEPT tables - typeError?

Question

I am testing ReactMarkdown to be able to render HTML tables from chatgpt generated markdown syntax. I've installed react-markdown and remarkGfm. But I keep getting this error: TypeError Cannot set properties of undefined (setting 'inTable')

I get the error both in the project and in the codesandbox when isolated + markdown is hardcoded for testing. Here is the code:

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

const MarkdownResponse = () => {
    const response = `
  # heading 1
  ## heading 2
  ### heading 3
  ~~strikethrough~~  

  > Blockquote  

  **strong**  
  *italics*  
  ***
  [Gmail](https://gmail.com)  
  ***
  1. ordered list
  2. ordered list
  - unordered list
  - unordered list  
  
  | Syntax      | Description |
  | ----------- | ----------- |
  | Header      | Title       |
  | Paragraph   | Text        |
  `;

    const tableStyles = `
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
  `;

    return (
        <div>
            <style>{tableStyles}</style>
            <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                children={response}
                components={{
                    table: ({ node, ...props }) => (
                        <table style={{ border: '1px solid black' }} {...props} />
                    )
                }}
            />
        </div>
    );
};

export default MarkdownResponse;

I have read several articles here and from what I can tell, it seems that it's supposed to work so long as remarkPlugins={[remarkGfm]}

I did see a thread where adding a style tag was supposed to make it work. But I have tried that as well and still getting the same error.

Link to codesandbox

Answer 1

Running into the same error here!

Edit: It looks like the version of remark-gfm updated 3 days ago, to 4.0.0. That might have brought with it some breaking changes. I've downgraded it to 3.0.1 and it seems to render markdown tables fine

Answer 2

Update 2023-10-08

Since react-markdown v9 is out there is no issue anymore with remark-gfm v4.

Old answer

As @HHH mentioned remark-gfm was updated last week (on Sep 18, 2023) along with a lot of its dependencies. It went from v3.0.1 to v.4.0.0 so a major update. Last update of react-markdown is v8.0.7 on Apr 12, 2023 so you might expect it not working with latest remark-gfm and the examples you're looking into are not up-to-date most probably.

So the compatible versions as of today are

"react-markdown": "^8.0.7",
"remark-gfm": "^3.0.1",

You can try

# with npm

npm uninstall remark-gfm
npm install -S [email protected]

# or with yarn

yarn remove remark-gfm
yarn add [email protected]

Answer 3

Helping hand - I discovered using the remarkGfm had a knock-on effect when using custom components in react-markdown. Though remarkGfm fixed the table layout, it stripped content (e.g. class names) from html tags when used in markdown (which is valid). As such applying remarkRehypeOptions > passThrough allowed both the tables to render correctly and links to use custom components.

<Markdown
   remarkPlugins={[remarkGfm]}
   rehypePlugins={[rehypeRaw]}
   remarkRehypeOptions={{ passThrough: ['link'] }}
    ...