showLineNumbers occurs error in React

[rikusen0335]

Using next-mdx-remote, then use some plugins:

  const content = await serialize(post.content, {
    mdxOptions: {
      remarkPlugins: [
        remarkHint,
        remarkBreaks,
      ],
      rehypePlugins: [
        rehypePrismPlus, // import rehypePrismPlus from "rehype-prism-plus";
        rehypeSlug,
      ]
    },
  })

then gets:

Warning: React does not recognize the `showLineNumbers` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `showlinenumbers` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

with:

```jsx showLineNumbers
const Component: VFC<Props> = ({ children }) => {
  return (
    <Hoge>
      <Foo />
    </Hoge>
  )
}

Tried showlinenumbers, showlinenumbers={true} and showLineNumbers but those all are throwing error (not exact same error)

Do I missed something or misconfigurated?
Thanks!

[timlrx]

It has to be camelCase i.e. showLineNumbers, but the example you provided should work. Does the code block render without error if you exclude the showLineNumbers option?

[rikusen0335]

@timlrx Hello, thank you for responding!

Answer is yes, excluding, means only these code:

```jsx
const Component: VFC<Props> = ({ children }) => {
  return (
    <Hoge>
      <Foo />
    </Hoge>
  )
}

works perfectly as I expected.

[rikusen0335]

Also, additionally, jsx {1} is not seems to working too.

[timlrx]

It works using the xdm / mdx v2 compiler so there's probably some difference in how the blocks are parsed. next-remote-mdx still uses mdx v1. Do you have a repo which I can replicate the error?

Also pinging @wooorm since we just discussed the issue on twitter. Would appreciate the help if you know what might be the difference, thanks.

[wooorm]

My guess is that MDX 1 never really supported userland properties well. There have been other issues in the past about casing being weird. That’s solved in xdm and MDX 2.
The Hashi folks are working on a next-mdx-remote version with support for the MDX 2 RC btw.

[timlrx]

Thanks, in that case I will just support XDM or MDX v2 for simplicity.

@rikusen0335 maybe you could try mdx-bundler instead? I use that myself and it works with the plugin.

[rikusen0335]

@timlrx Of course! I would try replacing to mdx-bundler then once if it's not worked, I would reproduce it on Codesandbox or another repo.

[rikusen0335]

So after replaced next-mdx-remote to mdx-bundler and applied same theme as demo pics used (night-owl theme on prism), it seems working perfectly!
I appreciate it.