docs(v2): unclear if React classes are supported in mdx or only functions

[benmccann]

📚 Documentation

I'm attempting to migrate the documentation for the popular Chart.js library from GitBook to Docusaurus 2. I created an .mdx with the following contents :

---
title: Line Chart
---

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

export class ExampleChart extends React.Component {
  componentDidMount() {
  }

  render() {
    return <div className="chartjs-wrapper"><canvas id="chartjs-0" className="chartjs" width="undefined" height="undefined"></canvas></div>;
  }
}

<ExampleChart />

## Example Usage
.
.
.

It gives me the error:

/docs/charts/line.mdx
SyntaxError: Chart.js/docs/docs/charts/line.mdx: Unexpected token (3:3)

  1 | export class ExampleChart extends React.Component {
  2 |   componentDidMount() {
> 3 |   }
    |    ^

If I simply remove componentDidMount then it works

Is there some restriction on the types of React components that I'm missing? I don't see anything mentioned in the documentation. The documentation only gives an example of a function component and does not show usage of a class component, so I'm wondering if that's not supported?

I'm a React beginner. I'm trying to create a new Chart.js instance, which needs a reference to the DOM element where the Chart will be rendered and so I'm trying to do it in componentDidMount after creating the DOM element in render

Have you read the Contributing Guidelines on issues?

Yes

[benmccann]

@nainardev advised me to use a function together with the useEffect hook. That solved my problem and I think would be a good addition to the documentation.

[fanny]

Hey @benmccann it seems that this problem is not related with Docusaurus, so maybe it's better report this issue in mdx-js repo. I'm so happy that you found the solution, current the most recommenced approach is use functional components instead of classes and use the hooks for define lifecycle methods.

For help to solve this problem, you can show more about your implementation, the problem can be related to other definitions in your code.

[benmccann]

Sure. Here's an example of where we're doing this: https://raw.githubusercontent.com/chartjs/Chart.js/master/docs/docs/charts/line.mdx

[slorber]

Not sure how to document this.

We can do many things in MDX and it's difficult to document all of them in an exhaustive way.
In general, I'd advise to keep components outside of MDX, and import your component.

For example:

# Hello

import MyComponent from "@site/src/components/MyComponent"

<MyComponent />

Declaring components inline (class or function) should work but you are more likely to make a typo and have a cryptic error message, and your IDE won't help you much.

MDX has its own limitations and bugs too

In general, you can validate how MDX transform your mdx doc to a React component using https://mdxjs.com/playground

If it looks like a valid JS component, it should work, otherwise try to fix the errors.