Table doesn't render despite passing remark-gfm plugin to react-markdown component

[mratzloff]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

react-markdown@8.0.3, remark-gfm@3.0.1, node@18.2.0, yarn@3.2.1

Link to runnable example

https://codesandbox.io/s/determined-cdn-i27dzt?file=/src/app.tsx

Steps to reproduce

Please see the link to the CodeSandbox instance.

import Markdown from "react-markdown";
import gfm from "remark-gfm";

export default function App() {
  const md = `*This* is a test.

    || This || is || a || test ||
    |  1    |  2  |  3 |  4    |
    |  A    |  B  |  C |  D    |`;

  return (
    <Markdown children={md} remarkPlugins={[gfm]} />
  );
}

Expected behavior

The table should be rendered, as is the case in the demo. This might very well be user error, in which case any guidance would be appreciated!

Actual behavior

Note that the following issues have also been reviewed: #532, #529, #526, #525, #524, #516, and #493.

Runtime

Other (please specify in steps to reproduce)

Package manager

Other (please specify in steps to reproduce)

OS

macOS

Build and bundle tools

Create React App

[wooorm]

That is not a table. You use too many pipes and no delimiter rkw

[mratzloff]

@wooorm Thanks, I appreciate the fast reply. It was another table formatting syntax evidently stuck in my brain from some other project.

[plus7c]

That is not a table. You use too many pipes and no delimiter rkw

can remarkGfm render table without delimiter rkw?