v0.8.22: React lazy loading error using `rx.recharts` after React Router upgrade

[tartansandal]

After upgrading from reflex 0.8.21 to 0.8.22, pages with nested state classes fail to render with React lazy loading errors.

Root cause investigation:
PR #6022 upgraded React Router from 7.9.6 to 7.10.1. This appears to trigger issues with how Reflex generates lazy-loaded components.

Error message:
[Reflex Frontend Exception]
Error: Element type is invalid. Received a promise that resolves to: undefined.
Lazy element type must resolve to a class or function.
at beginWork (react-dom_client.js:6140:13)

Reproduction pattern:
The issue occurs on pages that have:

• Multiple state classes with mixins (e.g., class MyState(SomeMixin, GlobalState))
• Nested component imports across modules
• State classes that inherit from a common parent state

Minimal context:
Our affected page uses:

• Vertical tabs with rx.tabs.root
• Multiple state classes extending a GlobalState with mixins
• Dialog components imported from submodules
• rx.cond() for conditional rendering

Workaround:
Pin reflex to 0.8.21: reflex==0.8.21

Related issues:

• React Router v7 "Element type is invalid" for correctly default-exported route component remix-run/react-router#13336 - Similar error pattern in React
  Router v7

[adhami3310]

can you produce minimal repro?

[tartansandal]

Minimal repro is hard, but I'm getting closer...

[tartansandal]

@adhami3310 After much digging and testing, I've pinned it down to recharts and not the complex loading in my app. Here's the minimal repro. 😅

import reflex as rx


class State(rx.State):
    """State with @rx.var that triggers the bug."""

    @rx.var
    def chart_data(self) -> list[dict]:
        return [{"name": "A", "value": 10}]


def index() -> rx.Component:
    return rx.box(
        rx.text("Bug Demo"),
        rx.recharts.bar_chart(
            rx.recharts.bar(data=State.chart_data, data_key="value"),
            height=200,
        ),
    )


app = rx.App()
app.add_page(index)

[jryberg]

Yes, this is a show stopper to be able to upgrade to 0.8.22

[giacomochiarella]

Getting the same issue here. At first glance, it appeared related to the import of a wrapped react component, but I tried it in a single cleaned page and it works. Any idea how to solve it? Should we wait for the 0.8.23?

[adhami3310]

You can try out 0.8.23a1