[Compiler Bug]: MDX content isn’t handled by React compiler

[remcohaszing]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAegFQAEBWYAeASlAHYAuAlgLYIAEAhlGRFfZXBmgDoma4EBJKgAcIMMgGVo8OjAT04ZTjx7VR42sFpQwCALIARABoBhFqJIJyYBjYD6wmBABuFACYIzIiJeu0AvrQAZk5UtADkOggwALSOLu4IbnFOrh6xamJkMZCwiOEqJEGkihQ+tHZwcmz6bvhm5FZkABTxwmAAlJo8tLRwPmBkFf3evmQ2ALzdJL29CFTIEfPhADQ9s8KL4cKr670AdIcOqYleFk1gzR1rM7OH+21g+yPn1uv+63JksDPNe7QAHkq5h8FweAD5-r0AfNwcBwvNhAALehgChgcL+AFoWGAwZOEgAczh4QkZAJhMx2PxPmJ-2xwNGYOEkNuHR4H0s+HUQw8QUYABshsUSKVyoZTD4yE1Wk52rQpsB-F1gOt+iRBpoAO4wejCYTRRYSgAy9AAntAyIFFf97scEh4zqDrFcbrNaPdHs8QWMwO8ANyfBDfGAzE3my20AD8tD+t2h4YtTE0nrlYH8rPd0Mq1WlejqDWl5BTh0egTQmdm2MTlsrXUWcfdOfkeYLUplj3ZbI5IBWIHVQQohJQIEyGjIZoNmloAAUBVBCRQSAB5YSUAYBYKhCIAI3oO4QAri88XJBi1UUMReFAF0TQbnRZHCgZIPGaqtuaDQ14FbDKJD0CAPEWLgQHoAUBVAjlaDAP8wEHBAbDnBcl1XdcNQ6f1e3AJEIC1ARGlDcCwBQfkBV0fwgA

Repro steps

Paste the following MDX output into the React compiler playground:

/*@jsxRuntime automatic*/
/*@jsxImportSource react*/

import { useMDXComponents as _provideComponents } from 'user-provided-provider-import-source'

function _createMdxContent(props) {
  const _components = {
    em: 'em',
    p: 'p',
    ..._provideComponents(),
    ...props.components
  }
  return (
    <_components.p>
      <em>{'emphasis'}</em> <strong>{'Strong'}</strong>
    </_components.p>
  )
}
export default function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? (
    <MDXLayout {...props}>
      <_createMdxContent {...props} />
    </MDXLayout>
  ) : (
    _createMdxContent(props)
  )
}

When compiling MDX to JavaScript, the React compiler fails to optimize its output. MDX produces 2 functions: MDXContent and _createMdxContent. The React compiler processes MDXContent, even though there’s not much to optimize. However, it fails to optimize _createMdxContent, which contains all of the MDX content the user wrote. I think it could be a huge win if that component gets optimized. The problem is that React compiler doesn’t optimize components whose name start with an underscore. MDX uses the underscore prefix for private helper variables. I see 3 solutions:

1. React compiler handles functions whose name start with an underscore. JSX transforms treat them the same as uppercased variables anyway.
2. We handle this in MDX. This isn’t great. We prefer to not incorporate React specific transforms.
   1. We rename _createMdxContent. This isn’t great, as the underscore indicates the function is private. Also this may break existing third party plugins.
   2. We add a 'use memo' directive in _createMdxContent. This isn’t great, because it’s specific to React.
3. Someone creates a custom plugin to implement 2.1 or 2.2. This isn’t great, because this means users need to add this plugin manually.

IMO it would be great if React compiler implements solution 1.

How often does this bug happen?

Every time

What version of React are you using?

19.2.0

What version of React Compiler are you using?

1.0.0

[josephsavona]

Thanks for posting. It certainly would be great for folks using MDX to get the benefit of compiler optimizations. Unfortunately this isn't as simple as compiling functions that start with an underscore. Note that it is only safe for React Compiler to compile components and hooks, since the compiler adds a hook call to create a memo cache instance specific to that component/hook. Compiling arbitrary functions that happen to have JSX can lead to runtime bugs, so the compiler follows the Rules of Hooks: components named with an uppercase first letter and hooks named starting with "use". The _createMdxContent function certainly looks like a component, but the name doesn't match the component naming scheme so the compiler can't reasonably infer it to be a component (w/o also accidentally compiling lots of other unsafe code by accident).

I'm curious if you're considered making the _createMdxContent() function a component? This is valid JSX, not React specific, and expresses the intent just as clearly as the current output.

[remcohaszing]

I see several mentions in the docs that hooks must start with the use prefix. I can’t quickly find a mention that component names must start with an uppercase character.

As far as Babel an TypeScript are concerned, a component may not start with a lower case ascii character. JSX expressions with lower case characters are transformed to a jsx call with a string literal argument, others with an identifier.

https://babeljs.io/repl/#?code_lz=DwQwBA9AfA3AUMAgpWCCHL7AIOYQfUyA
https://www.typescriptlang.org/play/#code/DwQwBA9AfA3AUMAgpWCCHL7AIOYQfUyA

So as far as they are concerned, _createMdxContent is a component.

I turned _createMdxContent() into <_createMdxContent_ /> in mdx-js/mdx#2445, but that PR has been stuck for a while. I don’t think this matters for the compiler though.