Common Errors

This is caused by using an older version of nodejs.

• Ensure the latest version of reflex is being used: pip install reflex --upgrade.

• Remove the .web and ~/.reflex directories and re-run reflex init.

Often caused by incorrect nesting of components

• Particularly <p> and <div>, but may also occur with tables

• Ensure there are no nested rx.text or layout components within rx.text

• Ensure that all tables are using rx.table.header and rx.table.body to wrap the rx.table.row rows

rx.text(
    rx.text("foo")
)
rx.text(
    rx.box("foo")
)
rx.text(
    rx.center("foo")
)

rx.table.root(
    rx.table.row(
        rx.table.column_header_cell("Full name"),
    ),
)

rx.text("foo")
rx.box(
    rx.text("foo")
)
rx.center(
    rx.text("foo")
)

rx.table.root(
    rx.table.header(
        rx.table.row(
            rx.table.column_header_cell("Full name"),
        ),
    ),
)

See upstream docs here.

Add a type annotation for list Vars

For certain props, reflex validates type correctness of the variable. Expecially when de-referencing lists and dicts, it is important to supply the correct annotation.

class State(rx.State):
    # NO
    my_list = ["a", "b", "c"]

    # YES
    my_indexable_list: list[str] = ["a", "b", "c"]

• Add type annotations to all state Vars.

This is caused by importing sqlmodel earlier than reflex.

• Ensure that reflex is imported before sqlmodel.