search

facebook / docusaurus

Easy to maintain open source documentation websites.
https://docusaurus.io
MIT License
54.96k stars 8.25k forks source link

Linking multiple PDFs in one line causes parsing error #3631

Closed TheodoreChu closed 3 years ago

TheodoreChu commented 3 years ago

šŸ› 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

  6. 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

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 commented 3 years ago

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 commented 3 years ago

Strange, but I can't reproduce this. I cloned the demo repo, run the site and don't see any errors :man_shrugging:

TheodoreChu commented 3 years ago

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.