You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using var declarations in inline event handler expressions (e.g., @input, @click), Alpine silently fails to register the handler. A SyntaxError: Unexpected token 'var' is logged as a console warning, but the handler is never registered and no error is thrown to the developer.
This is particularly insidious because:
The error is only a console warning — easy to miss
If x-model is on the same element, the x-model part still works, making it seem like the element is functional
The handler silently does nothing — no runtime error when the event fires
Reproduction
<!DOCTYPE html><html><head><scriptsrc="https://unpkg.com/alpinejs@3.14.8/dist/cdn.min.js" defer></script></head><body><divx-data="{ result1: 'FAIL', result2: 'FAIL', result3: 'FAIL', check(e) { var v = e.target.value; if (v.length > 0) { this.result2 = 'PASS'; } } }"><!-- BUG: var in inline expression — handler silently never registers --><input@input="var v = \$event.target.value; if (v.length > 0) { result1 = 'PASS' }"><spanx-text="'Test 1 (inline var): ' + result1"></span><!-- WORKS: method call --><input@input="check(\$event)"><spanx-text="'Test 2 (method): ' + result2"></span><!-- WORKS: inline without var --><input@input="if (\$event.target.value.length > 0) { result3 = 'PASS' }"><spanx-text="'Test 3 (inline no var): ' + result3"></span></div></body></html>
Expected: Typing in all three inputs updates the result to "PASS" Actual: Test 1 stays "FAIL" — the @input handler is never registered
Root Cause
Alpine's expression evaluator wraps inline expressions in `AsyncFunction` with something like:
```js
new AsyncFunction('...', `return (${expression})`)
```
`return (var v = ...)` is a JavaScript SyntaxError. The error is caught and logged as a warning, but the handler is not registered with a fallback approach.
Impact
This hit us in production. We had an `@input` handler with `var` + regex logic for emoji detection. It silently never worked. Because `x-model` was on the same element and handled the text part, we didn't notice the `@input` handler was dead. It took several debugging sessions to discover the handler was never registered.
Suggested Fix
Either:
Support `var` in expressions by falling back to wrapping without `return` when `return (expression)` fails:
```js
try {
func = new AsyncFunction('...', `return (${expression})`)
} catch {
func = new AsyncFunction('...', expression) // fallback for statements
}
```
Make the error more prominent — throw a clear error at init time (not just a console warning) with guidance like "Use a method in x-data instead of inline statements"
Document the limitation more prominently — the docs show `@click="count++"` style expressions but don't clearly warn that `var`/`let`/`const` declarations won't work
Environment
Alpine.js v3.14.8 (CDN)
Tested in Chromium (Playwright) and Safari
Affects all event directives (`@input`, `@click`, etc.)
This discussion was converted from issue #4740 on February 08, 2026 22:58.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
Description
When using
vardeclarations in inline event handler expressions (e.g.,@input,@click), Alpine silently fails to register the handler. ASyntaxError: Unexpected token 'var'is logged as a console warning, but the handler is never registered and no error is thrown to the developer.This is particularly insidious because:
x-modelis on the same element, thex-modelpart still works, making it seem like the element is functionalReproduction
Expected: Typing in all three inputs updates the result to "PASS"
Actual: Test 1 stays "FAIL" — the @input handler is never registered
Root Cause
Alpine's expression evaluator wraps inline expressions in `AsyncFunction` with something like:
```js
new AsyncFunction('...', `return (${expression})`)
```
`return (var v = ...)` is a JavaScript SyntaxError. The error is caught and logged as a warning, but the handler is not registered with a fallback approach.
Impact
This hit us in production. We had an `@input` handler with `var` + regex logic for emoji detection. It silently never worked. Because `x-model` was on the same element and handled the text part, we didn't notice the `@input` handler was dead. It took several debugging sessions to discover the handler was never registered.
Suggested Fix
Either:
```js
try {
func = new AsyncFunction('...', `return (${expression})`)
} catch {
func = new AsyncFunction('...', expression) // fallback for statements
}
```
Environment
Beta Was this translation helpful? Give feedback.
All reactions