Linking multiple PDFs in one line causes parsing error

[theodorechu]

🐛 Bug Report

Linking multiple PDFs in one line in a .md file causes parsing error.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Create a folder in the static folder called content
2. In the content, folder, run the following commands to download sample pdfs:

wget https://www.kungfoomanchu.com/guides/andy-klise-3x3x3-speedcubing-guide-v4.pdf
wget https://www.kungfoomanchu.com/guides/andy-klise-3x3x3-speedcubing-guide-v4-lefty.pdf
wget https://www.kungfoomanchu.com/guides/andy-klise-3x3x3-oll-v3.pdf

3. Open a doc file and past the following on a new line. Then click the links to confirm that the PDFs are available:

- [3x3x3 speedcubing guide](/content/andy-klise-3x3x3-speedcubing-guide-v4.pdf)
- [3x3x3 speedcubing guide for lefties](/content/andy-klise-3x3x3-speedcubing-guide-v4-lefty.pdf)
- [OLL guide](/content/andy-klise-3x3x3-oll-v3.pdf)

4. Open a doc file and paste the following in a new line:

Download the [3x3x3 speedcubing guide](/content/andy-klise-3x3x3-speedcubing-guide-v4.pdf), [3x3x3 speedcubing guide for lefties](/content/andy-klise-3x3x3-speedcubing-guide-v4-lefty.pdf), and the [OLL guide](/content/andy-klise-3x3x3-oll-v3.pdf). 

5. Get this error (I used .template.md):

./docs/template.md
SyntaxError: /template.md: Expected corresponding JSX closing tag for <p> (8:248)

   6 |       components={components}>
   7 | 
>  8 | <p>{`Download the `}<a target="_blank" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!../static/content/andy-klise-3x3x3-speedcubing-guide-v4.pdf').default}  >{`3x3x3 speedcubing guide`}</a>{`3x3x3 speedcubing guide for lefties`}</a>{`OLL guide`}</a>{`, `}<a target="_blank" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!../static/content/andy-klise-3x3x3-speedcubing-guide-v4-lefty.pdf').default}  >{`, and the `}<a target="_blank" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!../static/content/andy-klise-3x3x3-oll-v3.pdf').default}  >{`. `}</p>
     |                                                                                                                                                                                                                                                         ^
   9 |     </MDXLayout>
  10 |   )
  11 | };
 @ ./.docusaurus/registry.js 1:10885-10930 1:10775-10859
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js

1. You can also delete a new line from the list and get a similar error:

- [3x3x3 speedcubing guide](/content/andy-klise-3x3x3-speedcubing-guide-v4.pdf) [3x3x3 speedcubing guide for lefties](/content/andy-klise-3x3x3-speedcubing-guide-v4-lefty.pdf)
- [OLL guide](/content/andy-klise-3x3x3-oll-v3.pdf)

will give this error:

./docs/template.md
SyntaxError: /template.md: Expected corresponding JSX closing tag for <li> (9:248)

   7 | 
   8 | <ul>
>  9 | <li parentName="ul"><a target="_blank" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!../static/content/andy-klise-3x3x3-speedcubing-guide-v4.pdf').default}  >{`3x3x3 speedcubing guide`}</a>{`3x3x3 speedcubing guide for lefties`}</a>{` `}<a target="_blank" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!../static/content/andy-klise-3x3x3-speedcubing-guide-v4-lefty.pdf').default}  ></li>
     |                                                                                                                                                                                                                                                         ^
  10 | <li parentName="ul"><a target="_blank" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!../static/content/andy-klise-3x3x3-oll-v3.pdf').default}  >{`OLL guide`}</a></li>
  11 | </ul>
  12 |     </MDXLayout>
 @ ./.docusaurus/registry.js 1:10885-10930 1:10775-10859
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js

Expected behavior

I thought the markdown would parse normally.

Actual Behavior

I get a syntax error.

Your Environment

• Docusaurus version used: alpha-66
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Ubuntu WSL 18.04, Node 12.16.0
• Operating system and version (desktop or mobile): desktop, Windows build 19041.572

Reproducible Demo

(Paste the link to an example repo, including a siteConfig.js, and exact instructions to reproduce the issue.)

https://github.com/TheodoreChu/docusaurus-bug-report-demos/blob/main/docs/pdf-bug.md

Temporary workaround

Link the pdf files on separate lines as in step 3.

[slorber]

Agree, this is a bug.

The following:

Download the [3x3x3 speedcubing guide](/content/andy-klise-3x3x3-speedcubing-guide-v4.pdf), [3x3x3 speedcubing guide for lefties](/content/andy-klise-3x3x3-speedcubing-guide-v4-lefty.pdf), and the [OLL guide](/content/andy-klise-3x3x3-oll-v3.pdf). 

It gets parsed fine by MDX: https://mdxjs.com/playground

So this issue is our fault, and probably due to our remark plugin that rewire link to static files as React links + webpack file-loader require calls (this has a few advantages, like adding a hash to the linked files to improve caching)

A possible workaround is to opt-out to these require calls by using the pathname:// escape hatch, which enables to fall back to regular linking (which will work fine, because the assets are in /static anyway)

Download the [3x3x3 speedcubing guide](pathname:///content/andy-klise-3x3x3-speedcubing-guide-v4.pdf), [3x3x3 speedcubing guide for lefties](pathname:///content/andy-klise-3x3x3-speedcubing-guide-v4-lefty.pdf), and the [OLL guide](pathname:///content/andy-klise-3x3x3-oll-v3.pdf).

For anyone willing to fix this bug, this should be related to https://github.com/facebook/docusaurus/tree/master/packages/docusaurus-mdx-loader/src/remark/transformLinks

[lex111]

Strange, but I can't reproduce this. I cloned the demo repo, run the site and don't see any errors 🤷‍♂️

[theodorechu]

Sorry, I forgot that I removed the line that triggers the bug from the demo. I added the following sentence back into the pdf-bug.md to reproduce the error:

Download the [3x3x3 speedcubing guide](/content/andy-klise-3x3x3-speedcubing-guide-v4.pdf), [3x3x3 speedcubing guide for lefties](/content/andy-klise-3x3x3-speedcubing-guide-v4-lefty.pdf), and the [OLL guide](/content/andy-klise-3x3x3-oll-v3.pdf). 

Please pull for the latest commit. Thanks.