Invalid hook call when using react class component in MDX

[Danielku15]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When you try to declare react components using React.Component in MDX files you end up with an Invalid hook call. error.

Reproducible demo

No response

Steps to reproduce

1. Setup an empty Docusuarus with latest dependencies
   1. npx create-docusaurus@latest my-website classic --typescript && npx ncu -u && npm i && npm start
   2. Open https://docusaurus.new/stackblitz-ts
2. Open the docs/tutorial-basics/markdown-features.mdx
3. Change the file content to

---
sidebar_position: 4
---

import React from 'react'
export class Test extends React.Component {
	render() {
		return (<div>Title</div>);	
	}
}

<Test />

4. Open the page in the browser.
5. Experience the error.

Expected behavior

It should be possible declare React class components in MDX files without errors.

Actual behavior

The page crashes with:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16227:9)
    at Object.useContext (webpack-internal:///./node_modules/react/cjs/react.development.js:1619:21)
    at useMDXComponents (webpack-internal:///./node_modules/@mdx-js/react/lib/index.js:47:64)
    at Test.render (webpack-internal:///./docs/tutorial-basics/markdown-features.mdx:59:73)
    at finishClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19747:31)
    at updateClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:19693:24)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21606:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4213:16)
    at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:4277:31)

Moving the same class/code into a separate .tsx under src/ and importing it into the MDX works.

Your environment

• Public source code: https://docusaurus.new/stackblitz-ts
• Public site URL: not relevant
• Docusaurus version used: 3.1.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 122, Node 20.9
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Hi, I think this is an MDX issue (or maybe, design decision). The issue can be reproduced without Docusaurus:

// webpack.config.js
module.exports = {
  mode: "development",
  entry: "./index.tsx",
  output: {
    filename: "my-first-webpack.bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.mdx$/,
        use: {
          loader: "@mdx-js/loader",
          options: {
            providerImportSource: "@mdx-js/react",
          },
        },
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

{/* doc.mdx */}
import React from 'react'
export class Test extends React.Component {
	render() {
		return (<div>Title</div>);	
	}
}

<Test />

// index.tsx
import React from "react";
import ReactDOM from "react-dom";
import Doc from "./doc.mdx";

ReactDOM.render(<Doc />, document.getElementById("root"));

The output produced contains the following:

render() {
    const _components = {
      div: "div",
      ...(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_2__.useMDXComponents)()
    };
    return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(_components.div, {
      children: \"Title\"
// ...

This is expected output per https://mdxjs.com/guides/injecting-components/. Please reach out to them to see if they want to support this.

[slorber]

The output produced contains the following:

render() {
    const _components = {
      div: "div",
      ...(0,_mdx_js_react__WEBPACK_IMPORTED_MODULE_2__.useMDXComponents)()
    };
    return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV)(_components.div, {
      children: \"Title\"
// ...

Yes, using hooks in a class component is not going to work 😅

How do you get this output? This is surprising because the MDX playground doesn't give me this

[slorber]

Wondering what could be the compiled output of a React class component for MDX.

Particularly, if the user uses components provided by context:

import React from 'react'

export class Test extends React.Component {
	render() {
		return <SomeComponent/>
	}
}

Should the output be the following?

import React from 'react'

class Test extends React.Component {
  static contextType = MDXContext;

  render() {
    const {SomeComponent} = this.context;
    return <SomeComponent/>
  }
}

I don't see the MDXContext being exported @wooorm so I thought maybe class support has never been implemented?

https://mdxjs.com/packages/react/

[wooorm]

I don’t think many people use class components with MDX 😅 Or at least maybe they do but don’t have issues with it? Also, not everyone uses context-based providers, and together, expect components to be injected from them in class methods.

I think the MDX issue here is explained here: mdx-js/mdx#2444 (comment), a solution is being thought up here: mdx-js/mdx#2445.

MDX also isn’t tied to React. So if the class story improves, we have to be careful to not mess with classes in other frameworks.

[slorber]

I don’t think many people use class components with MDX 😅 Or at least maybe they do but don’t have issues with it? Also, not everyone uses context-based providers, and together, expect components to be injected from them in class methods.

Agree, that's a niche use case 😅

I think the MDX issue here is explained here: mdx-js/mdx#2444 (comment), a solution is being thought up here: mdx-js/mdx#2445.

I'm not sure @remcohaszing PR will fix this.

I don't see it in the Playground (maybe because it's framework agnostic?) but I see this in the dev tools, and there's no "conditional _createMdxContent" call being involved here.

import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
import {useMDXComponents as _provideComponents} from "@mdx-js/react";
import React from 'react';
export class Test extends React.Component {
  render() {
    const _components = {
      div: "div",
      ..._provideComponents() // ❌ BAD
    };
    return _jsx(_components.div, {
      children: "Title"
    });
  }
}

We are simply calling a hook in a class component, which doesn't work.

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

---

MDX source:

---
sidebar_position: 1
---

# Tutorial Intro

import React from 'react'
export class Test extends React.Component {
	render() {
	return (<div>Title</div>);
	}
}

<Test />

Full module source code seen in DevTools:

import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
import {useMDXComponents as _provideComponents} from "@mdx-js/react";
import React from 'react';
export class Test extends React.Component {
  render() {
    const _components = {
      div: "div",
      ..._provideComponents()
    };
    return _jsx(_components.div, {
      children: "Title"
    });
  }
}
export const toc = [];
function _createMdxContent(props) {
  const _components = {
    h1: "h1",
    ..._provideComponents(),
    ...props.components
  };
  return _jsxs(_Fragment, {
    children: [_jsx(_components.h1, {
      id: "tutorial-intro",
      children: "Tutorial Intro"
    }), "\n", "\n", "\n", _jsx(Test, {})]
  });
}
export default function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}

[Danielku15]

I don’t think many people use class components with MDX

https://github.com/search?q=%22export+class%22+React.Component+language%3Amdx&type=code

There are some false-positives (code snippets instead of components declared in MDX) in the result but it gives a high level insight data it is used here and there. But there are really not many results

I personally find it interesting that things work if you move the react class components into a dedicated file and import it. One would assume that the callstack and execution flows stay the same on rendering. Maybe this can give some hints on supporting class components within MDX? I assume MDX is injecting some additional code into the classes which cause the problem.

If class components cannot be supported (anymore) it might be worth to emit some user/dev friendly warnings/errors (configurable?). Even though I raised the issue I'm also fine with not having support for class components within MDX. I refactored my code to pull out the more complex components and things are working fine for me now. 😁

[remcohaszing]

This is different from mdx-js/mdx#2444 (comment).

I didn’t even realize MDX supports useMDXComponents outside of MDXContent / _createMdxContent. I could see both arguments why it should or shouldn’t. Personally I lean towards it shouldn’t, but changing it would be a breaking change.

Docusaurus could replace @mdx-js/react with a custom import provider, or even with a fallback to @mdx-js/react if the user really wants to, like Next.js. This avoids the use of hooks completely.