The example framework-lit - displays an error - this._$Ej.forEach is not a function

[shaal]

Astro Info

Astro                    v4.2.8
Node                     v18.19.0
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/lit

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Running:

• npm create astro@latest -- --template framework-lit

      ▲  error
         Error
      ▲  error
         Dependencies failed to install, please run npm install to install them manually after setup.

• yarn

warning " > @astrojs/[email protected]" has incorrect peer dependency "lit@^3.1.0".

• yarn start

TypeError
An error occurred.
this._$Ej.forEach is not a function
node/reactive-element.js:1:5589
Open in editor
import{customElements as t,HTMLElement as s}from"@lit-labs/ssr-dom-shim";import{getCompatibleStyle as i,adoptStyles as e}from"./css-tag.js";export{CSSResult,adoptStyles,css,getCompatibleStyle,supportsAdoptingStyleSheets,unsafeCSS}from"./css-tag.js";const{is:r,defineProperty:h,getOwnPropertyDescriptor:o,getOwnPropertyNames:n,getOwnPropertySymbols:a,getPrototypeOf:c}=Object,l=globalThis;l.customElements??=t;const p=l.trustedTypes,d=p?p.emptyScript:"",u=l.reactiveElementPolyfillSupport,f=(t,s)=>t,b={toAttribute(t,s){switch(s){case Boolean:t=t?d:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},y=(t,s)=>!r(t,s),m={attribute:!0,type:String,converter:b,reflect:!1,hasChanged:y};Symbol.metadata??=Symbol("metadata"),l.litPropertyMetadata??=new WeakMap;class g extends(globalThis.HTMLElement??s){static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=m){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),e=this.getPropertyDescriptor(t,i,s);void 0!==e&&h(this.prototype,t,e)}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=o(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t}};return{get(){return e?.call(this)},set(s){const h=e?.call(this);r.call(this,s),this.requestUpdate(t,h,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??m}static _$Ei(){if(this.hasOwnProperty(f("elementProperties")))return;const t=c(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(f("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(f("properties"))){const t=this.properties,s=[...n(t),...a(t)];for(const i of s)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const s=[];if(Array.isArray(t)){const e=new Set(t.flat(1/0).reverse());for(const t of e)s.unshift(i(t))}else void 0!==t&&s.push(i(t));return s}static _$Eu(t,s){const i=s.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return e(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,s,i){this._$AK(t,i)}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:b).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:b;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??y)(this[t],s))return;this.P(t,s,i)}!1===this.isUpdatePending&&(this._$ES=this._$ET())}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i)}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU()}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU()}updated(t){}firstUpdated(t){}}g.elementStyles=[],g.shadowRootOptions={mode:"open"},g[f("elementProperties")]=new Map,g[f("finalized")]=new Map,u?.({ReactiveElement:g}),(l.reactiveElementVersions??=[]).push("2.0.4");export{g as ReactiveElement,b as defaultConverter,y as notEqual};
//# sourceMappingURL=reactive-element.js.map
Stack Trace
TypeError: this._$Ej.forEach is not a function
    at MyCounter.update (file:///tmp/starlight/test/node_modules/@lit/reactive-element/node/reactive-element.js:1:5589)
    at LitElementRenderer.connectedCallback (file:///tmp/starlight/test/node_modules/@lit-labs/ssr/lib/lit-element-renderer.js:51:42)
    at render (/tmp/starlight/test/node_modules/@astrojs/lit/server.js:57:11)
    at render.next (<anonymous>)
    at Object.renderToStaticMarkup (/tmp/starlight/test/node_modules/@astrojs/lit/server.js:103:11)
    at renderFrameworkComponent (/tmp/starlight/test/node_modules/astro/dist/runtime/server/render/component.js:195:66)
    at async Module.renderComponent (/tmp/starlight/test/node_modules/astro/dist/runtime/server/render/component.js:355:10)
    at async Module.renderChild (/tmp/starlight/test/node_modules/astro/dist/

The preview on the page shows up for a split second, and then an error appear

What's the expected result?

A clean and smooth installation of framework-lit example

Link to Minimal Reproducible Example

https://astro.new/framework-lit?on=gitpod

Participation

• I am willing to submit a pull request for this issue.