[Compiler Bug]: Runtime error with Higher Order Components

[NickBlow]

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://codesandbox.io/p/devbox/vite-react-forked-w7lfc7?file=%2Fsrc%2FApp.tsx&workspaceId=5309445f-fc83-4685-b2a0-3050725a1482

Repro steps

We're just going through our codebase and fixing issues that we're getting when enabling the compiler.

Not sure if this is something we are doing wrong, or a compiler issue.

We get 'TypeError: Cannot read properties of null (reading 'useMemoCache')' when running something similar to the following code in NextJS (minimal repro):

Passing in a string as ElementType seems to be something that's fairly commonly recommended (https://www.aleksandrhovhannisyan.com/blog/dynamic-tag-name-props-in-react/ is the first result on Google for me).

import React, { ElementType, FC } from "react";

function TagChangingHOC(Tag: ElementType): FC<{text: string}> {
    return function({text}) {
        return <Tag>{text}</Tag>
    }
}

const DivTag = TagChangingHOC('div');
const SpanTag = TagChangingHOC('span');

export default function MyApp() {
    return (<> <DivTag text="foo"/> <SpanTag text="bar"/> </>)
}

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAHQHaYGZQ3AFwEsIMACAFQEMBzAYQAsqMaiWAJAeToApqaAlGWCYyZGAgKxyufMVJkewMgQQAPAmQC+QkeTHjJ0sgB5+APmCqNWkwHoLo7Zi2ZMcUmE0ARIgDd+MgBeSlpGZlYObh4AcgATfxiBAG53T00AZQAHZkCQ-nCWNhouXhiwHIwk1KwMdSyIGE04hGwqKAAbTVlCEnIAWQBPAEEsrJ5dJwkpGHIeE3NTXwDaFXUCILQQbAgILbtFk2zc1esNrYAjKhh9w4OBF0wQLSA

I'm very happy to accept an alternative solution if this is too much of an edge case.

How often does this bug happen?

Every time

What version of React are you using?

19.0.0-rc.0

[josephsavona]

I think what's happening here is that the HOC (TagChangingHOC) is being identified by the compiler as a component because its name is capitalized and it creates JSX somewhere. We can certainly try to identify HOCs more accurately, but for now a couple options:

• Opt-out of compilation on the HOC with "use no memo" (docs)
• Rename it to a lowercase first character (eg createTagChangingComponent())