Recharts components cause TypeError and infinite reload on any route

[hctilf]

Describe the bug
So, today i tried to work on my side-project but as today(May 25) i ran into in an issue:

Any Reflex page that renders a rx.recharts component (area_chart, line_chart, composed_chart, etc.) fails to load at runtime with a TypeError. React Router catches the error and retries the route module indefinitely, producing a blank page with an infinite reload loop. The app is otherwise healthy — all non-chart routes work normally.

The root cause is that recharts 3.x pulls es-toolkit/compat/get.js (a CommonJS file) into the bundle through its barrel export (recharts/es6/index.js). Vite 8's Rolldown bundler places the CJS interop helpers in a shared rolldown-runtime chunk that is not guaranteed to be loaded before lazy-loaded route chunks execute.

To Reproduce

Steps to reproduce the behavior:

1. Add any rx.recharts chart to a route page, e.g.:

   def my_page() -> rx.Component:
       return rx.recharts.area_chart(
           rx.recharts.area(data_key="value"),
           rx.recharts.x_axis(data_key="name"),
           data=[{"name": "A", "value": 1}],
           width="100%",
           height=300,
       )

2. Run reflex run --env prod (or deploy with the default Docker setup).
3. Navigate to the page containing the chart.
4. Observe infinite reload loop in the browser; browser console shows the errors below.

Expected behavior

The chart renders. The recharts components work as documented in the reflex-components-recharts package.

Screenshots

Browser console — production mode (Rolldown):

Error loading route module `/assets/_analytics_._run_._index-DyGOIpBr.js`, reloading page...
TypeError: t is not a function
    Ct  http://localhost:8180/assets/es6-3vbUkV3-.js:1
    o   http://localhost:8180/assets/rolldown-runtime-CATlyzt-.js:1
    wt  http://localhost:8180/assets/es6-3vbUkV3-.js:1
    o   http://localhost:8180/assets/rolldown-runtime-CATlyzt-.js:1
    <anonymous> http://localhost:8180/assets/es6-3vbUkV3-.js:1

Browser console — dev mode (Rollup):

Error loading route module `/app/routes/[analytics].[run]._index.jsx`, reloading page...
TypeError: require_isUnsafeProperty is not a function
    get.js:1
    __commonJSMin  chunk-C-Qwzh9l.js:8
    import_get     get.js:1
    recharts.js:1654

Specifics (please complete the following information):

• Python Version: 3.14.5
• Reflex Version: 0.9.3 (reflex-components-recharts 0.9.1, recharts 3.8.1, es-toolkit 1.47.0)
• OS: Linux — Docker (Debian trixie), also reproduced on Windows 11 local dev
• Browser (Optional): Firefox 138, Chrome 136

Additional context

Root cause: recharts/es6/SunburstChart.js, Sankey.js, and Treemap.js each import es-toolkit/compat/get.js, which is a CommonJS shim (module.exports = require('../dist/compat/object/get.js').get). Because recharts declares "sideEffects": false, tree-shaking should eliminate these unused components. In practice they are retained — likely because reflex-components-recharts imports recharts through its barrel in a way that prevents the bundler from tracing live exports.

In Rolldown (Vite 8 production), all CJS interop helpers are emitted into a shared rolldown-runtime-*.js chunk. When React Router 7 lazily loads a route module, rolldown-runtime is not declared as a module-level dependency of the lazy chunk, so it may not be initialised before the route code runs → t is not a function (minified __commonJS).

In Rollup (dev mode), each CJS wrapper defines a local require_isUnsafeProperty helper. Code-splitting places recharts and es-toolkit in separate chunks; the helper is in one chunk's closure but called from another → require_isUnsafeProperty is not a function.

Things tried that did not fix it:

Attempt	Result
area_chart / line_chart instead of composed_chart	No effect — barrel still retains es-toolkit
react-router.config.js: unstable_optimizeDeps: false	New error: MIME type "" for .vite/deps/ ×999
vite.config.js: optimizeDeps: { include: ['recharts'] }	No effect in prod — optimizeDeps is dev-server only
vite.config.js: manualChunks (recharts + es-toolkit → one chunk)	Rolldown does not honour manualChunks the same way as Rollup

my side project:

• Code / Link to Repo: https://github.com/performance-studio/openload
• PR where this surfaced: fix: update Dockerfile to include debug log level and refactor analyt… performance-studio/openload#13

[linear-code]

ENG-9595

[masenf]

Thanks for the report, this is definitely a regression that we want to address. I posted a PR into the framework to sort of hack around the problem at the vite layer, but I also filed an upstream issue recharts/recharts#7376 to try and get this addressed for recharts+vite users outside of the reflex ecosystem.

[hctilf]

Thanks for looking into this! Won't other upstream libs eventually introduce behaviors that break Recharts or other components too?

[masenf]

Won't other upstream libs eventually introduce behaviors that break Recharts or other components too?

The possibility definitely exists. Recharts (and some other components) are definitely a gap in our integration tests that we thought was being filled by having doc pages for all of the components in our website build. We have caught regressions before due to docs failing to build when bumping certain library dependencies. Unfortunately this one was not caught because the website is chonky enough to not hit the race condition between loading the CJS interop layer and the library that actually needs it.

Ultimately we want reflex to work with any existing NPM library, but with the incorporation of rolldown in vite, some of the older CJS-based libraries are running into compatibility issues (like #6054).

Trying to find a good strategy for handling these going forward. Open to ideas. We're less inclined to put hacks in, like #6567, but I would be open to restructuring our vite config to allow users to put in these kind of hacks themselves.