This is [mdx](https://github.com/mdx-js/mdx/tree/main/packages/mdx) library issue. ### SHORT ANSWER The bug occurred at [fromMarkdown](https://github.com/syntax-tree/mdast-util-from-markdown/blob/77208c8d1bfaf33f4024ce0b90e640178322e7d1/dev/lib/index.js#L105) fn. ### LONG EXPLANATION For `mdx` example from repro repo: https://github.com/melanieseltzer/mdx2-rendering-bugs-reproduction/blob/47f402b136f7603016cb7e186086cd25515b2fba/stories/Heading.stories.mdx to demonstrate the explanation, I set up a new repo: [debug-mdx](https://github.com/zhyd1997/debug-mdx) the call stack is: [compile(file, options?)](https://github.com/mdx-js/mdx/blob/main/packages/mdx/readme.md#compilefile-options) <- [process(file)](https://github.com/unifiedjs/unified/blob/b9358691047ad72e6390dfc3c3eedc15509e01fa/lib/index.js#L374) <- [parse(doc)](https://github.com/unifiedjs/unified/blob/b9358691047ad72e6390dfc3c3eedc15509e01fa/lib/index.js#L261) for [line 263](https://github.com/unifiedjs/unified/blob/b9358691047ad72e6390dfc3c3eedc15509e01fa/lib/index.js#L263), the `file` result a normal [VFile](https://github.com/vfile/vfile) object: ```js VFile { data: {}, messages: [], history: [], cwd: '/Users/zhyd1997/workspace/mdx', value: "import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';\n" + "import { Heading } from './Heading';\n" + '\n' + '\n' + '\n' + '# MDX 2 Rendering Bugs\n' + '\n' + `When there's no linebreak between jsx in the story source code, "\n` + '" gets inserted visually in the UI.\n' + '\n' + '

\n' + '\n' + `When there is a linebreak between jsx in the story source code, then there's no "\n` + '" in the UI, and things look normal.\n' + '\n' + '

\n' + '\n' + 'When the jsx is multi-line in the source code, then the content gets wrapped in a \\ tag when rendered.\n' + '\n' + 'ONLY occurs if the source code itself (the jsx) is multi-line, not if the content itself is rendered on multiple lines and wraps in the UI.\n' + '\n' + '

\n' + '\n' + '## Props\n' + '\n' + '' } ``` but when running the [return](https://github.com/unifiedjs/unified/blob/b9358691047ad72e6390dfc3c3eedc15509e01fa/lib/index.js#L273) statement, the result is strange (you can try to run `console.log(JSON.stringify(Parser(String(file), file)))`, and format it on a online JSON viewer.): 1. `\n` issue: Screen Shot 2022-08-16 at 16 47 13

2. `

` issue: Screen Shot 2022-08-16 at 16 36 48 After logging the [Parser](https://github.com/unifiedjs/unified/blob/b9358691047ad72e6390dfc3c3eedc15509e01fa/lib/index.js#L264): ```js console.log(Parser.toString()) ``` I found it uses `remark-parse` [parser](https://github.com/remarkjs/remark/blob/99179c6745a2173d07d5c3b46bad7df767e1989d/packages/remark-parse/lib/index.js#L11-L25). so continuing the call stack: `remarkParse(options)` <- [fromMarkdown](https://github.com/remarkjs/remark/blob/99179c6745a2173d07d5c3b46bad7df767e1989d/packages/remark-parse/lib/index.js#L15) the definition of `fromMarkdown` is from [mdast-util-from-markdown](https://github.com/syntax-tree/mdast-util-from-markdown/): https://github.com/syntax-tree/mdast-util-from-markdown/blob/77208c8d1bfaf33f4024ce0b90e640178322e7d1/dev/lib/index.js#L105 That's all I found **until now**.

MDX2: newline character is added visually, and extra `<p>` tag is getting inserted in the DOM #18921

Company

Community

Support

Connect