Missing href when linking to some static files in JSX about docusaurus

[slorber]

I understand how it can be confusing, but this is how Webpack loaders work.

JSX tags (both in MDX and React files) are rendered as-is, unprocessed, so it is your responsibility to ensure that the <a> href prop you provide to them is correct. For Markdown files.

For Markdown files, we make the assumption that a link with an extension is likely to download the file. This is fine because user still has the possibility to use JSX to opt-out of this Markdown link behavior, and having a different behavior for JSX is there on purpose.

Please consider the following JSX:

<div>
  <a href={require('./test.csv').default}>Download test.csv</a>
</div>

<div>
  The CSV file content is:
  <pre>{require('./test.csv').default}
</div>

As you can see, requiring a CSV file can mean different things to different people. They might want to provide a link to that CSV, or they might want to display the content of the file itself. When using Markdown, the case is more limited because the 2nd case doesn't apply here.

It's impossible for Docusaurus to provide an opinion on how files should be loaded that would make all users happy, for that reason we only provide an opinion on the most common media files, and let users add their own opinions through custom Webpack config if they want to.

It's impossible for us to automatically support CSV as a downloadable format in Docusaurus, because many users will not want that. But if on your site, you are sure all CSV files are downloadable files and not rendered inline, you can use the configureWebpack hook to register your own Webpack loader

---

Demo time

https://stackblitz.com/edit/github-a18bvz-rmfzbj?file=docs%2Fintro.md

<ul>
  <li>{JSON.stringify(require('./test.docx'))}</li>
  <li>{JSON.stringify(require('./test.csv'))}</li>
  <li>{JSON.stringify(require('!file-loader?name=assets/files/[name]-[contenthash].[ext]!./test.csv'))}</li>
</ul>

An alternative to using configureWebpack could be to use inline webpack loaders. In practice this is what we actually do with Markdown links.

You can provide a sensible default thanks to the Webpack global config, but you can also decide on a case-by-case basis what does it mean for Webpack to require a file, overriding that default config.