Search code examples
reactjsdocusaurus

Building page with asynchronous react component does not render the latest iteration when building the documentation

I've been migrating my documentation from Jekyll to docusaurus V2.

Context

I need to fetch data from a CSV file to display them as a table in the documentation.

To that end, I've created a custom react component that fetches and format the data. Since the process is Asynchronous, the first time the component renders it display the fallback 'No data' paragrap.

After a few milliseconds the data have been fetched and processed and the render of the component is triggered again and finally the table is being displayed.

It's all well and good when I do this using npm-start with the inbuilt server. However when I build the documentation then it seems that the component hasn't had the chance to render the data.

This means that on the static page version it's displayed "No Data"

Here is the snippet to the component code : https://jsfiddle.net/mkLd5ayx/

And here is what I have in the mdx file :

import CsvTable from '@site/src/components/CsvTable'

## Functional overview

<CsvTable id="environmental-operational-characteristics" tableType="characteristics" tableCategory="Environmental operating conditions" tableDesign="FS-LT"></CsvTable>

Image 1: On local server:

local rendering of the component

Image 2: When serving the static webpage from the remote server

remote viewing of the page

Solution

  • I got an answer on github discussion for this issue.

    https://github.com/facebook/docusaurus/discussions/4333

    Docusaurus does not handle component level lifecycle and thus I had to preprocess the csv files before building and then in my react component require them instead of fetching them.