reflex-dev/reflex · error · VarTypeError

code should be string literal or a StringVar type. Got {type

Error message

code should be string literal or a StringVar type. Got {type(code)} instead.

What it means

Shiki code blocks accept only Python str or reflex StringVar for the `code` prop so the component can strip transformer trigger comments ([!code ...]) via a compiled JS regex. Any other type (int, list, a Var of non-string type) triggers VarTypeError at render prep time.

Source

Thrown at packages/reflex-components-code/src/reflex_components_code/shiki_code_block.py:839

        return ShikiCodeBlock.create(children[0], **props)

    @staticmethod
    def _map_themes(theme: str) -> str:
        if isinstance(theme, str) and theme in THEME_MAPPING:
            return THEME_MAPPING[theme]
        return theme

    @staticmethod
    def _map_languages(language: str) -> str:
        if isinstance(language, str) and language in LANGUAGE_MAPPING:
            return LANGUAGE_MAPPING[language]
        return language

    @staticmethod
    def _strip_transformer_triggers(code: str | StringVar) -> StringVar | str:
        if not isinstance(code, (StringVar, str)):
            msg = f"code should be string literal or a StringVar type. Got {type(code)} instead."
            raise VarTypeError(msg)
        regex_pattern = r"[\/#]+ *\[!code.*?\]"

        if isinstance(code, Var):
            return string_replace_operation(
                code, StringVar(_js_expr=f"/{regex_pattern}/g", _var_type=str), ""
            )
        if isinstance(code, str):
            return re.sub(regex_pattern, "", code)
        return None


class TransformerNamespace(ComponentNamespace):
    """Namespace for the Transformers."""

    shikijs = ShikiJsTransformer


class CodeblockNamespace(ComponentNamespace):

View on GitHub (pinned to 45b8ed5ab7)

Solutions

1. Convert the value to a string: str(value) for literals, or value.to_string() for Vars
2. Type the backing State field as str: code: str = ''
3. For non-string Vars, wrap with rx.code(... only after .to_string()) before passing to the shiki component

Example fix

// before
rx.shiki_code_block(State.line_count)  # int var

// after
rx.shiki_code_block(State.code)  # code: str
# or
rx.shiki_code_block(State.line_count.to_string())

from reflex import Var
from reflex.vars import StringVar
code = State.code if isinstance(State.code, str) else State.code.to_string()

def is_code_arg(code) -> bool:
    from reflex.vars import StringVar
    return isinstance(code, (str, StringVar))

When it happens

Trigger: Passing rx.State numeric/list state vars, Python numbers, or arbitrary objects as the `code` argument of shiki_code_block / code_block create(), which routes through _strip_transformer_triggers.

Common situations: Binding a State field typed as int or list (e.g. a line count or file array) directly to the code prop, or passing a computed Var whose _var_type is not str.

Understand the failure class

Background: Invalid argument type errors: "must be of type string", "expected X, got Y", and ERR_INVALID_ARG_TYPE explained — this error's family across 15 libraries.

Related errors

• transformers should be a LiteralVar type. Got {type(self.tra
• the function names should be str names of functions in the s
• You must specify either children or src for the script eleme
• f"Icon name must be a string, got {tag_var._var_type}"

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