-
Notifications
You must be signed in to change notification settings - Fork 193
Description
Description
When a Vaadin 25 project includes an addon that imports @polymer/* packages (e.g., @polymer/paper-button), the dev bundle regeneration produces a TypeError: this._$changeProperty is not a function error in the browser console.
The error comes from ConnectionIndicator in @vaadin/common-frontend, which uses Lit 4 decorators. At runtime, the ConnectionIndicator class resolves against Lit 3's ReactiveElement (which lacks _$changeProperty), because the generated package.json forces old Lit versions.
Root Cause
When BundleValidationUtil detects packages not in the pre-built bundle (like @polymer/paper-button), it regenerates the dev bundle. The generated package.json includes:
lit-element: ^3.2.2andlit-html: 2.4.0as direct dependenciesoverridesthat pinlit-elementandlit-htmlto those old versions via$lit-element/$lit-html
These conflict with lit: 3.3.2 (from the Vaadin distribution), which internally requires lit-element: ^4.2.0. The result is two versions of ReactiveElement in the bundle: Lit 3's (without _$changeProperty) and Lit 4's (with it). ConnectionIndicator ends up extending the wrong one.
Steps to Reproduce
- Clone: https://github.com/manolo/vaadin-lit-bug
- Run
mvn spring-boot:run - Open
http://localhost:8080in a browser - Open browser console
The project is a minimal Vaadin 25.0.7 + Spring Boot 4.0.3 app with a single addon (grid-pagination 4.0.0) that imports @polymer/paper-button.
Expected Behavior
The dev bundle should be generated without Lit version conflicts. The package.json overrides should not force lit-element 3.x when the Vaadin distribution ships lit 3.3.x (which requires lit-element 4.x).
Actual Behavior
Browser console shows:
TypeError: this._$changeProperty is not a function
The generated node_modules contain both lit-element 3.3.3 and 4.2.0, and the bundle includes two ReactiveElement implementations.
Versions
- Vaadin 25.0.7
- Spring Boot 4.0.3
- Java 21
- Tested on macOS (Darwin 24.6.0)