reflex-dev/reflex · error · TypeError

Array elements must be of type LiteralVar, not {type(element

Error message

Array elements must be of type LiteralVar, not {type(element_var)}

What it means

LiteralArrayVar.json() serializes each element of the stored list via LiteralVar.create; elements that cannot become literal vars (functions, objects without serializers, live connections) make TypeError fire because there is no JS literal for them.

Source

Thrown at packages/reflex-base/src/reflex_base/vars/sequence.py:684

            The hash of the var.
        """
        return hash((self.__class__.__name__, self._js_expr))

    def json(self) -> str:
        """Get the JSON representation of the var.

        Returns:
            The JSON representation of the var.

        Raises:
            TypeError: If the array elements are not of type LiteralVar.
        """
        elements = []
        for element in self._var_value:
            element_var = LiteralVar.create(element)
            if not isinstance(element_var, LiteralVar):
                msg = f"Array elements must be of type LiteralVar, not {type(element_var)}"
                raise TypeError(msg)
            elements.append(element_var.json())

        return "[" + ", ".join(elements) + "]"

    @classmethod
    def create(
        cls,
        value: OTHER_ARRAY_VAR_TYPE,
        _var_type: type[OTHER_ARRAY_VAR_TYPE] | None = None,
        _var_data: VarData | None = None,
    ) -> LiteralArrayVar[OTHER_ARRAY_VAR_TYPE]:
        """Create a var from a string value.

        Args:
            value: The value to create the var from.
            _var_type: The type of the var.
            _var_data: Additional hooks and imports associated with the Var.

View on GitHub (pinned to 45b8ed5ab7)

Solutions

1. Mark the list as backend (leading underscore) if the client doesn't need it.
2. Serialize each element to a JSON-safe dict/str before storing (e.g. [m.model_dump() for m in models]).
3. Register serializers for your custom types.

Example fix

# before
class State(rx.State):
    callbacks: list = [str.upper]  # function not serializable

# after
class State(rx.State):
    _callbacks: list = [str.upper]  # backend only
    names: list[str] = []

import json

def list_elements_serializable(lst) -> bool:
    return all(json_safe(e) for e in lst) if isinstance(lst, list) else False

def json_safe(v) -> bool:
    import json
    try:
        json.dumps(v); return True
    except TypeError:
        return False

When it happens

Trigger: Putting non-serializable objects (callables, custom class instances, file handles) inside a list stored in a frontend state var, then rendering it or serializing state to JSON during hydration/compile.

Common situations: Storing lists of model instances or callables in frontend state; computed vars returning lists of arbitrary objects; forgetting to mark data-only-for-server lists as backend ('_' prefix).

Related errors

• The keys and values of the object must be literal vars to ge
• The component `{child_name}` can only be a child of the comp
• Cannot serialize color that contains non-literal vars.
• Color is not a valid color.
• No valid JSON representation for {self}

AI-assisted analysis of reflex-dev/reflex@45b8ed5ab7 (2026-08-28). Data as JSON: /api/errors/0024acdcbc4218ab. Report an issue: GitHub.