Error in compiling Graph toolkit component with fast serve

[HarminderSethi]

Hi,

While using mgt-graph toolkit components , fast serve throw below error. although the solution provided in https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/3055 works with gulp serve but fast serve still breaks.

ERROR in ./node_modules/lit-html/directives/class-map.js 6:106 Module parse failed: Unexpected token (6:106) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | Copyright 2018 Google LLC | SPDX-License-Identifier: BSD-3-Clause

*/const e=s(class extends i{constructor(t){if(super(t),t.type!==r.ATTRIBUTE		"class"!==t.name		t.strings?.length>2)throw Error("classMap() can only be used in the class attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i		(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)		this.nt?.has(t)		(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)))}return t}});export{e as classMap};	//# sourceMappingURL=class-map.js.map

ERROR in ./node_modules/lit-html/directives/if-defined.js 6:16 Module parse failed: Unexpected token (6:16) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | Copyright 2018 Google LLC | SPDX-License-Identifier: BSD-3-Clause

*/const o=o=>o??t;export{o as ifDefined};	//# sourceMappingURL=if-defined.js.map

ERROR in ./node_modules/lit-element/lit-element.js 6:194 Module parse failed: Unexpected token (6:194) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | Copyright 2017 Google LLC | SPDX-License-Identifier: BSD-3-Clause

*/class s extends t{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const i=this.render();this.hasUpdated		(this.renderOptions.isConnected=this.isConnected),super.update(t),this.$Do=e(i,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.$Do?.setConnected(!1)}render(){return i}}s.$litElement$=!0,s[("finalized","finalized")]=!0,globalThis.litElementHydrateSupport?.({LitElement:s});const r=globalThis.litElementPolyfillSupport;r?.({LitElement:s});const o={$AK:(t,e,i)=>{t.$AK(e,i)},$AL:t=>t.$AL};(globalThis.litElementVersions??=[]).push("4.0.4");export{s as LitElement,o as _$LE};	//# sourceMappingURL=lit-element.js.map

ERROR in ./node_modules/lit-html/lit-html.js 6:302 Module parse failed: Unexpected token (6:302) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | SPDX-License-Identifier: BSD-3-Clause | /

const t=globalThis,i=t.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:t=>t}):void 0,e="$lit$",h=lit$${(Math.random()+"").slice(9)}$,o="?"+h,n=<${o}>,r=document,l=()=>r.createComment(""),c=t=>null===t		"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)		"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--	\/[^a-zA-Z])	(\/?[a-zA-Z][^>\s]*)	(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>	${d}(?:([^\s"'>=/]+)(${d}=${d}(?:[^ \t\n\f\r"'`<>=]	("	')	))	$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script	style	textarea	title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),b=y(2),w=Symbol.for("lit-noChange"),T=Symbol.for("lit-nothing"),A=new WeakMap,E=r.createTreeWalker(r,129);function C(t,i){if(!Array.isArray(t)		!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const P=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"		c===p?c=m:c===v		c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n:d>=0?(o.push(a),s.slice(0,d)+e+s.slice(d)+h+x):s+h+(-2===d?i:x)}return[C(t,l+(t[s]		"<?>")+(2===i?"":"")),o]};class V{constructor({strings:t,$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=P(t,s);if(this.el=V.createElement(f,n),E.currentNode=this.el.content,2===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(r=E.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?k:"?"===e[1]?H:"@"===e[1]?I:R}),r.removeAttribute(t)}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i?i.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),E.nextNode(),d.push({type:2,index:++c});r.append(t[s],l())}}}else if(8===r.nodeType)if(r.data===o)d.push({type:2,index:c});else{let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1}c++}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function N(t,i,s=t,e){if(i===w)return i;let h=void 0!==e?s.$Co?.[e]:s.$Cl;const o=c(i)?void 0:i.$litDirective$;return h?.constructor!==o&&(h?.$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h.$AT(t,s,e)),void 0!==e?(s.$Co??=[])[e]=h:s.$Cl=h),void 0!==h&&(i=N(t,h.$AS(t,i.values),h,e)),i}class S{constructor(t,i){this.$AV=[],this.$AN=void 0,this.$AD=t,this.$AM=i}get parentNode(){return this.$AM.parentNode}get $AU(){return this.$AM.$AU}u(t){const{el:{content:i},parts:s}=this.$AD,e=(t?.creationScope??r).importNode(i,!0);E.currentNode=e;let h=E.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new M(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new L(h,this,t)),this.$AV.push(i),l=s[++n]}o!==l?.index&&(h=E.nextNode(),o++)}return E.currentNode=r,e}p(t){let i=0;for(const s of this.$AV)void 0!==s&&(void 0!==s.strings?(s.$AI(t,s,i),i+=s.strings.length-2):s.$AI(t[i])),i++}}class M{get $AU(){return this.$AM?.$AU??this.$Cv}constructor(t,i,s,e){this.type=2,this.$AH=T,this.$AN=void 0,this.$AA=t,this.$AB=i,this.$AM=s,this.options=e,this.$Cv=e?.isConnected??!0}get parentNode(){let t=this.$AA.parentNode;const i=this.$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this.$AA}get endNode(){return this.$AB}_$AI(t,i=this){t=N(this,t,i),c(t)?t===T		null==t		""===t?(this.$AH!==T&&this.$AR(),this.$AH=T):t!==this.$AH&&t!==w&&this.(t):void 0!==t.$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this.(t)}S(t){return this.$AA.parentNode.insertBefore(t,this.$AB)}T(t){this.$AH!==t&&(this.$AR(),this.$AH=this.S(t))}(t){this.$AH!==T&&c(this.$AH)?this.$AA.nextSibling.data=t:this.T(r.createTextNode(t)),this.$AH=t}$(t){const{values:i,$litType$:s}=t,e="number"==typeof s?this.$AC(t):(void 0===s.el&&(s.el=V.createElement(C(s.h,s.h[0]),this.options)),s);if(this.$AH?.$AD===e)this.$AH.p(i);else{const t=new S(e,this),s=t.u(this.options);t.p(i),this.T(s),this.$AH=t}}$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new V(t)),i}k(t){a(this._$AH)		(this.$AH=[],this.$AR());const i=this.$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new M(this.S(l()),this.S(l()),this,this.options)):s=i[e],s.$AI(h),e++;e<i.length&&(this.$AR(s&&s.$AB.nextSibling,e),i.length=e)}$AR(t=this.$AA.nextSibling,i){for(this.$AP?.(!1,!0,i);t&&t!==this.$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){void 0===this.$AM&&(this.$Cv=t,this.$AP?.(t))}}class R{get tagName(){return this.element.tagName}get $AU(){return this.$AM.$AU}constructor(t,i,s,e,h){this.type=1,this.$AH=T,this.$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2		""!==s[0]		""!==s[1]?(this.$AH=Array(s.length-1).fill(new String),this.strings=s):this.$AH=T}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=N(this,t,i,0),o=!c(t)		t!==this.$AH&&t!==w,o&&(this.$AH=t);else{const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=N(this,e[s+n],i,n),r===w&&(r=this._$AH[n]),o		=!c(r)		r!==this.$AH[n],r===T?t=T:t!==T&&(t+=(r??"")+h[n+1]),this.$AH[n]=r}o&&!e&&this.j(t)}j(t){t===T?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class k extends R{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===T?void 0:t}}class H extends R{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==T)}}class I extends R{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5}$AI(t,i=this){if((t=N(this,t,i,0)??T)===w)return;const s=this.$AH,e=t===T&&s!==T		t.capture!==s.capture		t.once!==s.once		t.passive!==s.passive,h=t!==T&&(s===T		e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this.$AH=t}handleEvent(t){"function"==typeof this.$AH?this.$AH.call(this.options?.host??this.element,t):this.$AH.handleEvent(t)}}class L{constructor(t,i,s){this.element=t,this.type=6,this.$AN=void 0,this.$AM=i,this.options=s}get $AU(){return this.$AM.$AU}$AI(t){N(this,t)}}const z={P:e,A:h,C:o,M:1,L:P,R:S,D:u,V:N,I:M,H:R,N:H,U:I,B:k,F:L},Z=t.litHtmlPolyfillSupport;Z?.(V,M),(t.litHtmlVersions??=[]).push("3.1.2");const j=(t,i,s)=>{const e=s?.renderBefore??i;let h=e.$litPart$;if(void 0===h){const t=s?.renderBefore??null;e.$litPart$=h=new M(i.insertBefore(l(),t),t,void 0,s??{})}return h.$AI(t),h};export{z as $LH,x as html,w as noChange,T as nothing,j as render,b as svg};	//# sourceMappingURL=lit-html.js.map

ERROR in ./node_modules/@lit/task/task.js 6:421 Module parse failed: Unexpected token (6:421) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | Copyright 2017 Google LLC | SPDX-License-Identifier: BSD-3-Clause

*/const s={INITIAL:0,PENDING:1,COMPLETE:2,ERROR:3},i=Symbol();class h{get taskComplete(){return this.t		(1===this.status?this.t=new Promise(((t,s)=>{this.i=t,this.o=s})):3===this.status?this.t=Promise.reject(this.h):this.t=Promise.resolve(this.l)),this.t}constructor(t,s,i){this.u=0,this.status=0,(this.p=t).addController(this);const h="object"==typeof s?s:{task:s,args:i};this._=h.task,this.v=h.args,this.j=h.argsEqual??r,this.m=h.onComplete,this.g=h.onError,this.autoRun=h.autoRun??!0,"initialValue"in h&&(this.l=h.initialValue,this.status=2,this.k=this.A?.())}hostUpdate(){!0===this.autoRun&&this.O()}hostUpdated(){"afterUpdate"===this.autoRun&&this.O()}A(){if(void 0===this.v)return;const t=this.v();if(!Array.isArray(t))throw Error("The args function must return an array");return t}async O(){const t=this.A(),s=this.k;this.k=t,t===s		void 0===t		void 0!==s&&this.j(s,t)		await this.run(t)}async run(t){let s,h;t??=this.A(),this.k=t,1===this.status?this.T?.abort():(this.t=void 0,this.i=void 0,this.o=void 0),this.status=1,"afterUpdate"===this.autoRun?queueMicrotask((()=>this.p.requestUpdate())):this.p.requestUpdate();const r=++this.u;this.T=new AbortController;let e=!1;try{s=await this._(t,{signal:this.T.signal})}catch(t){e=!0,h=t}if(this.u===r){if(s===i)this.status=0;else{if(!1===e){try{this.m?.(s)}catch{}this.status=2,this.i?.(s)}else{try{this.g?.(h)}catch{}this.status=3,this.o?.(h)}this.l=s,this.h=h}this.p.requestUpdate()}}abort(t){1===this.status&&this.T?.abort(t)}get value(){return this.l}get error(){return this.h}render(t){switch(this.status){case 0:return t.initial?.();case 1:return t.pending?.();case 2:return t.complete?.(this.value);case 3:return t.error?.(this.error);default:throw Error("Unexpected status: "+this.status)}}}const r=(s,i)=>s===i		s.length===i.length&&s.every(((s,h)=>!t(s,i[h])));export{h as Task,s as TaskStatus,i as initialState,r as shallowArrayEquals};	//# sourceMappingURL=task.js.map

ERROR in ./node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js 6:47 Module parse failed: Unexpected token (6:47) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | Copyright 2017 Google LLC | SPDX-License-Identifier: BSD-3-Clause

*/function n(n){return(o,r)=>{const{slot:e}=n??{},s="slot"+(e?[name=${e}]:":not([name])");return t(o,r,{get(){const t=this.renderRoot?.querySelector(s);return t?.assignedNodes(n)??[]}})}}export{n as queryAssignedNodes};	//# sourceMappingURL=query-assigned-nodes.js.map

ERROR in ./node_modules/@lit/reactive-element/decorators/query-assigned-elements.js 6:58 Module parse failed: Unexpected token (6:58) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | Copyright 2021 Google LLC | SPDX-License-Identifier: BSD-3-Clause

*/function o(o){return(e,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?[name=${r}]:":not([name])");return t(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}export{o as queryAssignedElements};	//# sourceMappingURL=query-assigned-elements.js.map

ERROR in ./node_modules/@lit/reactive-element/decorators/query.js 6:59 Module parse failed: Unexpected token (6:59) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | Copyright 2017 Google LLC | SPDX-License-Identifier: BSD-3-Clause

*/function e(e,r){return(n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;if(r){const{get:e,set:r}="object"==typeof s?n:i??(()=>{const t=Symbol();return{get(){return this[t]},set(e){this[t]=e}}})();return t(n,s,{get(){let t=e.call(this);return void 0===t&&(t=o(this),(null!==t		this.hasUpdated)&&r.call(this,t)),t}})}return t(n,s,{get(){return o(this)}})}}export{e as query};	//# sourceMappingURL=query.js.map

ERROR in ./node_modules/@lit/reactive-element/reactive-element.js 6:629 Module parse failed: Unexpected token (6:629) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | Copyright 2017 Google LLC | SPDX-License-Identifier: BSD-3-Clause

*/const{is:i,defineProperty:e,getOwnPropertyDescriptor:r,getOwnPropertyNames:h,getOwnPropertySymbols:o,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l: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}},f=(t,s)=>!i(t,s),y={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this.$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this.$Eh&&[...this.$Eh.keys()]}static createProperty(t,s=y){if(s.state&&(s.attribute=!1),this.$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e(this.prototype,t,r)}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t}};return{get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static $Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=!0,this.$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h(t),...o(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(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(t(s))}else void 0!==s&&i.push(t(s));return i}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 s(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:u).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:u;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??f)(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){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d("elementProperties")]=new Map,b[d("finalized")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4");export{b as ReactiveElement,u as defaultConverter,f as notEqual};	//# sourceMappingURL=reactive-element.js.map

ERROR in ./node_modules/lit-html/directives/repeat.js 7:513 Module parse failed: Unexpected token (7:513) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | SPDX-License-Identifier: BSD-3-Clause | /

const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c=s(class extends t{constructor(e){if(super(e),e.type!==r.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return{values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=l(s),{values:p,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p;const h=this.ut??=[],v=[];let m,y,x=0,j=d.length-1,k=0,w=p.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v[k]=o(d[x],p[k]),x++,k++;else if(h[j]===a[w])v[w]=o(d[j],p[w]),j--,w--;else if(h[x]===a[w])v[w]=o(d[x],p[w]),i(s,v[w+1],d[x]),x++,w--;else if(h[j]===a[k])v[k]=o(d[j],p[k]),i(s,d[x],d[j]),j--,k++;else if(void 0===m&&(m=u(a,k,w),y=u(h,x,j)),m.has(h[x]))if(m.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=i(s,d[x]);o(e,p[k]),v[k]=e}else v[k]=o(t,p[k]),i(s,d[x],t),d[e]=null;k++}else n(d[j]),j--;else n(d[x]),x++;for(;k<=w;){const e=i(s,v[w+1]);o(e,p[k]),v[k++]=e}for(;x<=j;){const e=d[x++];null!==e&&n(e)}return this.ut=a,f(s,v),e}});export{c as repeat};

//# sourceMappingURL=repeat.js.map

ERROR in ./node_modules/@lit/reactive-element/decorators/query-all.js 7:69 Module parse failed: Unexpected token (7:69) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | SPDX-License-Identifier: BSD-3-Clause | /

let e;function r(r){return(n,o)=>t(n,o,{get(){return(this.renderRoot??(e??=document.createDocumentFragment())).querySelectorAll(r)}})}export{r as queryAll};	//# sourceMappingURL=query-all.js.map

ERROR in ./node_modules/@lit/reactive-element/decorators/query-async.js 7:95 Module parse failed: Unexpected token (7:95) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | SPDX-License-Identifier: BSD-3-Clause | /

function r(r){return(n,e)=>t(n,e,{async get(){return await this.updateComplete,this.renderRoot?.querySelector(r)??null}})}export{r as queryAsync}; | //# sourceMappingURL=query-async.js.map

[HarminderSethi]

gulp file

"use strict"; const path = require("path"); const build = require("@microsoft/sp-build-web");

build.addSuppression(Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.);

var getTasks = build.rig.getTasks; build.rig.getTasks = function () { var result = getTasks.call(build.rig);

result.set("serve", result.get("serve-deprecated"));

return result; };

/ fast-serve / const { addFastServe } = require("spfx-fast-serve-helpers"); addFastServe(build); / end of fast-serve /

build.configureWebpack.mergeConfig({ additionalConfiguration: (generatedConfiguration) => { // mgt related loaders generatedConfiguration.module.rules.push({ test: /.js|.jsx$/,

  // only run on lit packages in the root node_module folder
  include: [
    path.resolve(__dirname, "./node_modules/@lit"),
    path.resolve(__dirname, "./node_modules/lit"),
    path.resolve(__dirname, "./node_modules/lit-html"),
  ],
  use: {
    loader: "babel-loader",
    options: {
      plugins: [
        "@babel/plugin-transform-optional-chaining",
        "@babel/plugin-transform-nullish-coalescing-operator",
        "@babel/plugin-transform-logical-assignment-operators",
      ],
    },
  },
});
return generatedConfiguration;

}, }); build.initialize(require("gulp"));

[s-KaiNet]

Since the changes for gulpfile.js are introduced inside build.configureWebpack.mergeConfig, then you need to apply corresponding changes inside webpack.extend.js. Read more here on how to create webpack.extend.js, if it's not created for you. Then put below config into the file:

const webpackConfig = {
  module: {
    rules: [{
      test: /\.js$/,
      include: [
        /lit/,
        /@lit/,
        /lit-html/
      ],
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            '@babel/plugin-transform-optional-chaining',
            '@babel/plugin-transform-nullish-coalescing-operator',
            '@babel/plugin-transform-logical-assignment-operators'
          ]
        }
      }
    }]
  }
}

[HarminderSethi]

@s-KaiNet Thanks for the help. It works fine now. I should have read the documentation first :)