Markdown tables are not working

[mtt87]

• mdx-bundler version: 5.2.1
• node version: 16.6.1
• npm version: 7.20.3
• esbuild version: 0.12.19

Relevant code or config

  const { code, frontmatter } = await bundleMDX(source, {
    cwd: path.join(process.cwd(), 'src', 'content', 'docs'),
    xdmOptions(options) {
      // eslint-disable-next-line
      options.rehypePlugins = [rehypeSlug]
      return options
    },
    esbuildOptions(options) {
      // eslint-disable-next-line
      options.platform === 'node'
      return options
    },
  })

What you did:

Added a markdown table

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

What happened:

There is no table element output at all, this is the code output of bundleMDX()

`,(0,n.jsx)(e.p,{children:`| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |`}),`

And the visual output

Reproduction repository:

https://replit.com/@mtt87/QuickwittedSpottedProcedures#index.js

Problem description:
Markdown tables are not rendered correctly

Suggested solution:
Not sure at the moment where the issue could be, I guess either mdx-bundler or esbuild or xdm are the packages involved here 😄 I'm gonna try to compile with xdm to see what's the output without mdx-bundler involved

[mtt87]

Okay after a bit more investigation, it seems like xdm supports commonmark spec which weirdly doesn't include tables so the output from xdm is a paragraph p tag.

Closing this issue, I will ask in xdm repo if there is a workaround.

[mtt87]

In case anyone ends up here in the future
https://github.com/wooorm/xdm#github-flavored-markdown-gfm
tl;dr: add https://github.com/remarkjs/remark-gfm to the remark plugins and it will handle tables

[vincerubinetti]

This caught me off guard! It looks like now XDM is deprecated, and was replaced with mdx-js/mdx, which this package switched to. I guess mdx-js/mdx still must be adhering to commonmark, because I'm still observing tables not being converted. Adding the GFM plugin as suggested above worked.

      mdxOptions: (options) => {
        options.remarkPlugins = [...(options.remarkPlugins ?? []), remarkGfm];
        return options;
      },