Mdx: remark-mdx: empty line before closing tag issue

[atanasster]

Subject of the issue

The issue causes parsing failure in a compiler plugin that parses the child.value strings for post processing.

Reproduce

The following:

<button>
  <div>hello world</div>
  //<- there is one empty space here at the start of the line
</button>

will parse as

  "children": [
    {
      "type": "jsx",
      "value": "<button>\n  <div>hello world</div>\n\n</button>\n\n",
...
    }
  ],

However, removing the one space on the empty line will parse as 3 separate elements:

<button>
  <div>hello world</div>
//<- there is no empty space here
</button>

 "children": [
    {
      "type": "jsx",
      "value": "<button>\n  <div>hello world</div>",
    },
    {
      "type": "text",
      "value": "\n"
    },
    {
      "type": "jsx",
      "value": "</button>",
    }
  ],

Potential solution

The issue seems to be here: https://github.com/mdx-js/mdx/blob/dec55ec92f9ff42b0ae3617f0168a387e56f7ff8/packages/remark-mdx/block.js#L101

Since an empty string will always pass the test, the closing tag is missed if there is an empty line before it.

Any reasons not to change the rule to

   ...
      if (line.length && sequence[1].test(line)) {
        index = next
        break
      }
...

[atanasster]

@johno - did you have a chance to check this issue?

[Zunaib]

This still occurs, any workaround on the way ?

[threehams]

Current workaround is to avoid any empty lines within JSX blocks as they may or may not cause a syntax error. Prettier + many editors strip out trailing whitespace, so I don't think you're going to want to rely on it.

[seanhealy]

This is still being problematic for us. Removing empty lines isn't great as it leaves the example code harder to read. Has anyone found a reliable way of preventing Prettier from stripping trailing whitespace within mdx Playground blocks?

[FG-avi]

I was also having this issue. The error message I got was:

"SyntaxError: unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>".

I am putting the error message in here since searching for the error did not lead me to this issue. I just happened to read a comment that had a link to here.

[Iulia-Soimaru]

I am getting similar errors as well, my Story:

<Story name="input">
    {() => {
        const [value, setValue] = useState('');

        return (
            <InputComponent
                placeholder="0"
                value={value}
                onChange={setValue}
            />
        )
    }}
</Story>

error:

Module build failed (from ./node_modules/@mdx-js/loader/index.js):
SyntaxError: unknown: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (64:0)

  62 | </Story>
  63 | `}</code></pre>
> 64 | </Preview>
     | ^
  65 | <h1 {...{"id":"api"}}>{`API`}</h1>
  66 | <Props of={InputComponent} />
  67 |     </MDXLayout>

and when I remove space before return:

<Story name="input">
    {() => {
        const [value, setValue] = useState('');
        return (
            <InputComponent
                placeholder="0"
                value={value}
                onChange={setValue}
            />
        )
    }}
</Story>

getting this error instead:

Module build failed (from ./node_modules/@mdx-js/loader/index.js):
SyntaxError: Unexpected token (49:12)
    at Object._raise (/Users/iuliasoimaru/Documents/www/platform/node_modules/@babel/parser/lib/index.js:742:17)
    at Object.raiseWithData (/Users/iuliasoimaru/Documents/www/platform/node_modules/@babel/parser/lib/index.js:735:17)
    at Object.raise (/Users/iuliasoimaru/Documents/www/platform/node_modules/@babel/parser/lib/index.js:729:17)
...

[FG-avi]

I also got different errors when I commented out a line of code. Currently, I can't have any empty lines between code and I can't comment out code either or storybook breaks when using mdx files.

[wooorm]

Thanks for all your comments folks! We’re working on adding proper JSX parsing. 2.0.0 will solve many of the JSX parsing issues, including this one!

[atanasster]

@wooorm great, looking forward to it. If you guys need some PRs or other help, pls give a shoutout.

[wooorm]

2.0.0 will be all about syntax, which I’m working on. I’ve taken care of this issue (some more stuff to do though). If you’re interested, there are some issues marked as “help wanted” that are unrelated to syntax, that we could also use help on!

[shilman]

@wooorm terrible question, but ... any ETA for 2.0? i'm asking because I'm planning Storybook's big 6.0 release and it would be amazing to sneak any MDX 2.0 breaking changes into that.

[wooorm]

Right, makes sense. For the date I see for Storybook 6, then yes, MDX 2 should be out earlier. Not too much earlier. This is all an estimation.

[wooorm]

@shilman were going to spend some more time on making sure mdx 2 is much better, which will take more time. I don't think you should wait on us for releasing a storybook major

[shilman]

Let’s see how it all plays out. SB 6 is also a beast and those dates have been slipping ever since 5.3 shipped. I’ll check back in when we get to RC and see where you’re at. Really excited to see what you come up with for MDX2—you’re doing amazing work here! 💯

[wooorm]

Hi all! I’m going to close this as it landed on the main, the (now default) branch we’re using to gear up to the MDX@2 release.

The reason is so that it’s more clear which issues still need to be solved already and don’t require further work.

Expect another next release soonish, which might include it, or maybe it’s already released as a beta!

For more info, see https://github.com/mdx-js/mdx/issues/1041.