State object not found

[PasqualePuzio]

Describe the bug The state object cannot be found in the javascript application

To Reproduce As you can see from the screenshot, the app_state object is correctly sent to the client as expected, however the javascript application is crashing because it can't find it. I have no idea why this is happening. To give you more context, we have a global state called AppState from which many child states are inheriting. In the frontend code, in this case we have a simple rx.cond which does the following

rx.cond(AppState.show_mobile_menu,rx.lucide.icon(tag='x',color=colors.WHITE),rx.lucide.icon(tag='menu',color=colors.WHITE))

which gets compiled to

reflex___state____state__fantacalcio_frontend_web___appstate____app_state.show_mobile_menu ? ...

Maybe a dot is missing and mistakenly replaced with an underscore? Not sure.

Everything used to work fine on Reflex 0.5.x (and on other projects running on Reflex 0.6.x the same architecture works well too).

Expected behavior The state object should be accessible by the javascript application

Screenshots

Specifics:

• Python Version: 3.12.4
• Reflex Version: 0.7.14
• OS: Mac OS
• Browser: Chrome

[linear[bot]]

ENG-6185 State object not found

[PasqualePuzio]

Fyi, I’ve tested the same app with earlier versions such as 0.7.11 up to 0.7.0 and I get similar issues. I’ll test it on 0.6.x and I’ll let you know, but I suppose something has changed in the compilation process, indeed the compiled javascript code looks very different from earlier versions.

[PasqualePuzio]

One more detail: the app uses Reflex Chakra UI module (0.7.1)

[Lendemor]

Usually, when you use state vars, if you check the compiled page, you should see a hook that get the state instance on the client side so it can be used in the page by children/props.

Given the error, this hook seems to be removed somewhere.

It often happens when reflex "auto-split" some part of the code to be re-used. If a hook is needed by multiple children/props, but is extracted, it can lead to that kind of error.

Usual workaround is to decorate the render function where all this stuff happens with rx.memo

[PasqualePuzio]

Usually, when you use state vars, if you check the compiled page, you should see a hook that get the state instance on the client side so it can be used in the page by children/props.

Given the error, this hook seems to be removed somewhere.

It often happens when reflex "auto-split" some part of the code to be re-used. If a hook is needed by multiple children/props, but is extracted, it can lead to that kind of error.

Usual workaround is to decorate the render function where all this stuff happens with rx.memo

Thank you for the advice.

I'm currently finalizing the migration to Reflex 0.6.8 first, which was a bit painful to be honest :)

Once I'm sure everything works well on 0.6.8 I'll try to migrate 0.7.14 again.

Your explanation sounds right, it could also explain the other issue I faced here https://github.com/reflex-dev/reflex/issues/5427

For clarification, where should I add rx.memo exactly?

Let's suppose I have a template function like this

def template(component):
   return rx.vstack(
     header(),
     menu(),
     component, # page component
     footer()
   )

Should I add rx.memo to template? Should I add it to header, menu and footer as well?

However, I think this is a bug that should be fixed. I think it's pretty common in relatively large apps to define some kind of general templates in which each page component is then rendered.

[PasqualePuzio]

FYI, I've managed to complete the migration on Reflex 0.6.8 and Chakra 0.7.0. So it looks like the issue with compiling javascript is on Reflex 0.7.x What did exactly change in the compilation process?

[adhami3310]

is the issue present in latest version?

[PasqualePuzio]

I haven't tried it yet.

On Mon, Jul 7, 2025 at 11:33 PM Khaleel Al-Adhami @.***> wrote:

adhami3310 left a comment (reflex-dev/reflex#5428) https://github.com/reflex-dev/reflex/issues/5428#issuecomment-3046579348

is the issue present in latest version?

— Reply to this email directly, view it on GitHub https://github.com/reflex-dev/reflex/issues/5428#issuecomment-3046579348, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB2KYXYHHE7M3GN3GVWZPY33HLRQ5AVCNFSM6AAAAAB64YCIC6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTANBWGU3TSMZUHA . You are receiving this because you authored the thread.Message ID: @.***>

-- Pasquale Puzio