Recharts page renders blank on full load with Vite 8.0.12 - `require_isUnsafeProperty is not a function`

[jumbi77]

Description

A page containing a Recharts chart renders completely blank on a direct/full page load, with require_isUnsafeProperty is not a function in the browser console. The cause is the Vite 8.0.12 version Reflex 0.9.x pins; its dependency optimizer miscompiles the Recharts bundle. Downgrading to Vite 7.3.3 fixes it.

---

Describe the bug

A page containing a Recharts chart (e.g. rx.recharts.bar_chart) renders completely blank on a direct/full page load. The browser console shows:

Uncaught TypeError: require_isUnsafeProperty is not a function

The cause is the Vite 8.0.12 version that Reflex 0.9.x pins: its dependency optimizer miscompiles the Recharts bundle (via Recharts' es-toolkit dependency). Switching to Vite 7.3.3 fixes it immediately.

To Reproduce

Minimal example — just two files:

rxconfig.py

import reflex as rx

config = rx.Config(app_name="vite8_recharts_repro")

vite8_recharts_repro/vite8_recharts_repro.py

import reflex as rx


class State(rx.State):
    data: list[dict] = [
        {"name": "A", "value": 10},
        {"name": "B", "value": 30},
        {"name": "C", "value": 20},
    ]


@rx.page(route="/chart")
def chart_page() -> rx.Component:
    return rx.recharts.bar_chart(
        rx.recharts.bar(data_key="value"),
        rx.recharts.x_axis(data_key="name"),
        data=State.data,
        width=400,
        height=300,
    )


app = rx.App()

Steps:

1. reflex run
2. In the browser, open http://localhost:3000/chart directly (full page load, not via in-app navigation).
3. → Blank page; console shows require_isUnsafeProperty is not a function.

Counter-test (confirms Vite is the cause):

# Set "vite" to "7.3.3" in .web/package.json, then:
cd .web && rm -rf node_modules/.vite && bun install && cd ..
reflex run

→ /chart now renders the chart correctly.

Note: A plain bun add vite@7.3.3 doesn't stick, because reflex run regenerates .web/package.json and resets Vite back to 8.0.12 (pinned in reflex_base/constants/installer.py).

• Code/Link to Repo: (minimal repro above — happy to provide a repo if needed)

Expected behavior

/chart displays the bar chart — including on a direct/full page load.

Screenshots

Blank page with console error require_isUnsafeProperty is not a function (Vite 8.0.12) vs. correctly rendered chart (Vite 7.3.3).

Specifics (please complete the following information):

• Python Version: 3.14
• Reflex Version: 0.9.3
• OS: macOS (Darwin 24.6.0, Apple Silicon)
• Browser (Optional): Safari 26.2 (also reproducible in Chrome)

Additional context

The Vite 8.0.12 optimizer produces a broken line in the Recharts bundle where a variable ends up calling itself:

// vite 8.0.12 (broken):
var require_isUnsafeProperty = require_isUnsafeProperty();   // calls itself → undefined → "is not a function"

// vite 7.3.3 (correct):
var require_isUnsafeProperty2 = require_isUnsafeProperty();  // distinct name, works

Suggested workaround: temporarily pin Vite to < 8 (e.g. 7.3.3) until the optimizer bug is fixed.

[linear-code]

ENG-9651

[kmararia]

@jumbi77 , I'm new to reflex and not a professional front-end dev either so thanks a lot for the workaround suggestion!

Just wanted to confirm that pinning Vite to version 7.3.3 resolved this issue for me. My reflex config file looks somewhat like this:

import reflex as rx

config = rx.Config(
    app_name="my-app-name",
    frontend_packages=["vite@7.3.3"],
)

[cloud-rocket]

Workaround

Force rolldown to 1.0.3 in .web/package.json overrides. Since reflex rewrites package.json on every reflex run (sourcing overrides from reflex_base.constants.PackageJson.OVERRIDES), editing .web directly is clobbered; we patch the constant in our Docker image build instead:

# add to reflex_base/constants/installer.py PackageJson.OVERRIDES
OVERRIDES = {
    "cookie": "1.1.1",
    "rolldown": "1.0.3",
}