search

remarkjs / react-remark

React component and hook to use remark to render markdown
https://remarkjs.github.io/react-remark
MIT License
208 stars 7 forks source link

Lots of console output about whitespace nodes in tables #5

Closed tremby closed 4 years ago

tremby commented 4 years ago

I have a couple of GFM tables in one of the documents I'm rendering. I'm getting a lot of output in the console like this:

Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <table>. Make sure you don't have any extra whitespace between tags on each line of your source code.
    in table
    in Remark (at markdown.tsx:33)
    ...
Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <thead>. Make sure you don't have any extra whitespace between tags on each line of your source code.
    in thead
    in table
    in Remark (at markdown.tsx:33)
    ...
Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tr>. Make sure you don't have any extra whitespace between tags on each line of your source code.
    in tr
    in thead
    in table
    in Remark (at markdown.tsx:33)
    ...
Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>. Make sure you don't have any extra whitespace between tags on each line of your source code.
    in tbody
    in table
    in Remark (at markdown.tsx:33)
    ...
Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tr>. Make sure you don't have any extra whitespace between tags on each line of your source code.
    in tr
    in tbody
    in table
    in Remark (at markdown.tsx:33)
    ...
ChristianMurphy commented 4 years ago

@tremby could you share a sample of the markdown which causes this error?

tremby commented 4 years ago 
### Tables (GFM feature)

#### First example

This example is from https://github.github.com/gfm/#tables-extension- (that link was not marked up or enclosed in anglebrackets; it should autolink, which is another GFM feature)

| foo | bar |
| --- | --- |
| baz | bim |

#### Second example

| abc | defghi |
:-: | -----------:
bar | baz
ChristianMurphy commented 4 years ago

huh, I tried it out in the sandbox https://christianmurphy.github.io/react-remark/?path=/story/remark-component--plain-markdown and it appears to render without an error. Trying a codesandbox I am able to reproduce the error https://codesandbox.io/s/hardcore-moser-uecfq

I suspect it's either coming from https://github.com/rehypejs/rehype-react/blob/414e4becae174fc3edcdfb458a45a4ae878e7f46/index.js#L4 or https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/table.js but haven't fully traced the root cause yet

wooorm commented 4 years ago

Production vs develop mode? Or upgrading react might fix it?

tremby commented 4 years ago

I'm still on React 16.x; very possible that upgrading to 17 will clear the error.

Thanks for your help and fast responses; I appreciate that.

What's happened now though is I've seen my bundle size increase by about 300k when I installed the syntax highlighter plugin. I've backpedalled and switched back to remark-react, which I started off on, and where I can use remark-react-lowlight, which lets me pick a subset of syntax highlighters to include. It's not giving me the errors on this table.

I'll try the upgrade if I change my mind again; I intend to upgrade in the near future anyway.