octobercms/october · error · Twig\Error\SyntaxError

Invalid syntax in the component tag. Line %s

Error message

Invalid syntax in the component tag. Line %s

What it means

The {% component %} tag parses a component name expression, then zero or more parameter assignments of the form name = expression (hyphenated names like data-testid are supported). Any token that is not a NAME starting an assignment - a bare string, a number, or a stray operator - throws this SyntaxError with the tag's starting line.

Source

Thrown at modules/cms/twig/tokenparser/ComponentTokenParser.php:53

        while (!$stream->test(TwigToken::BLOCK_END_TYPE)) {
            $current = $stream->next();

            if ($current->test(TwigToken::NAME_TYPE)) {
                $paramName = $current->getValue();

                // Support hyphenated attribute names like `data-testid` and `aria-label`.
                // Twig tokenizes them as NAME `-` NAME ..., so consume the pieces until `=`.
                while ($stream->test(TwigToken::OPERATOR_TYPE, '-')) {
                    $stream->next();
                    $paramName .= '-' . $stream->expect(TwigToken::NAME_TYPE)->getValue();
                }

                $stream->expect(TwigToken::OPERATOR_TYPE, '=');
                $nodes[$paramName] = $this->parser->parseExpression();
                $paramNames[] = $paramName;
            }
            else {
                throw new TwigErrorSyntax(
                    sprintf('Invalid syntax in the component tag. Line %s', $lineno),
                    $stream->getCurrent()->getLine(),
                    $stream->getSourceContext()
                );
            }
        }

        $stream->expect(TwigToken::BLOCK_END_TYPE);

        // Pass nodes directly without wrapping inside 'nodes'
        return new ComponentNode($nodes, $paramNames, $lineno, $this->getTag());
    }

    /**
     * getTag name associated with this token parser.
     * @return string The tag name
     */
    public function getTag()

View on GitHub (pinned to b608633a7e)

Solutions

1. Write parameters as assignments only: {% component 'blogPost' alias='sidebar' %}.
2. Pass any non-assignment value as part of the component name expression or set it on the component's properties instead.
3. Remove stray tokens (commas, quotes, numbers) after the parameter list.

Example fix

{# before: positional second argument - not a NAME = pair #}
{% component 'blogPost' 'sidebar' %}

{# after: named assignment #}
{% component 'blogPost' alias='sidebar' %}

$env = app('twig.environment');
try {
    $env->parse($env->tokenize(new \Twig\Source($templateBody, $fileName)));
} catch (\Twig\Error\SyntaxError $e) {
    // reject invalid {% component %} syntax at lint time
}

try {
    $env->parse($env->tokenize(new \Twig\Source($body, $name)));
} catch (\Twig\Error\SyntaxError $e) {
    // 'Invalid syntax in the component tag' - fix params to name = value pairs
}

When it happens

Trigger: Writing {% component 'blogPost' 'sidebar' %} (second value without name =), {% component 'blogPost' 123 %}, or {% component alias='x' %} where the leading component name expression is malformed - the loop hits a non-NAME token and throws.

Common situations: Assuming positional arguments like Twig functions; missing the = between parameter and value; trailing commas or leftover characters after the last parameter.

Related errors

• Unknown "%s" configuration.
• The "%s" modifier takes exactly one argument (0 given).
• The "%s" modifier takes exactly one argument (2 given).
• Invalid syntax in the content tag. Line %s
• Invalid syntax in the framework tag. Line %s

AI-assisted analysis of octobercms/october@b608633a7e (2026-08-21). Data as JSON: /api/errors/c29066fce705d1e6. Report an issue: GitHub.