No error is raised when EventSpec is used as a Component child

[j-bennet]

Describe the bug

I'm getting a TypeError: Class constructor Event cannot be invoked without 'new' on the frontend.

To Reproduce

I'm not very sure what's happening, but here is the stack:

TypeError: Class constructor Event cannot be invoked without 'new'
    at Box_4b732d969094035c599769db3dd6fba2 (webpack-internal:///(pages-dir-node)/./pages/index.js:27:14)
    at react-stack-bottom-frame (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9251:18)
    at renderWithHooks (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4898:19)
    at renderElement (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5333:23)
    at retryNode (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6092:31)
    at renderNodeDestructive (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6042:11)
    at renderNode (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6499:18)
    at renderChildrenArray (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6375:9)
    at retryNode (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6116:13)
    at renderNodeDestructive (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6042:11)
    at renderElement (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5512:13)
    at retryNode (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6092:31)
    at renderNodeDestructive (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6042:11)
    at finishFunctionComponent (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4942:13)
    at renderElement (file:///Users/jbennet/src/flaire-pulse-ai/.web/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5384:11)

This is my first time using Reflex. I'm good with Python, but not good with anything frontend.

• Code/Link to Repo:

The index page triggering the error looks like this:

import reflex as rx

from ..state import State


def index() -> rx.Component:
    """The index page that redirects to home if logged in, otherwise to login."""
    return rx.box(
        rx.cond(State.is_authenticated, rx.redirect("/home"), rx.redirect("/login"))
    )

Expected behavior

No error?

Screenshots

Specifics (please complete the following information):

• Python Version: 3.12
• Reflex Version: 0.7.14
• OS: MacOS
• Browser (Optional): Chrome

Additional context Add any other context about the problem here.

[linear[bot]]

ENG-6290 TypeError: Class constructor Event cannot be invoked without 'new'

[Lendemor]

The syntax is wrong, you can't have a rx.redirect directly as a child of a component.

You need to bind that event to an event trigger.

[Lendemor]

If you want to execute logic when the page open, attach this to the on_load trigger when adding the page.

[j-bennet]

@Lendemor

If you want to execute logic when the page open, attach this to the on_load trigger when adding the page.

Genius. This worked. Thank you! I didn't discover this recipe at first:

https://reflex.dev/docs/events/page-load-events/