microsoftgraph / msgraph-sdk-javascript

Microsoft Graph client library for JavaScript
https://graph.microsoft.com
MIT License
730 stars 220 forks source link

Issue in using Microsoft Graph Toolkit in SPFx #1629

Closed HarminderSethi closed 4 months ago

HarminderSethi commented 4 months ago

Bug Report

Prerequisites

For more information, see the CONTRIBUTING guide.

Description

I am trying to use graph toolkit with SPFx and followed the steps provided in https://learn.microsoft.com/en-us/graph/toolkit/get-started/mgt-spfx but gulp serve is throwing error

Error - [webpack] 'dist': ./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
@ ./node_modules/lit/directives/class-map.js 1:0-46 1:0-46 @ ./node_modules/@microsoft/mgt-components/dist/es6/components/mgt-agenda/mgt-agenda.js @ ./node_modules/@microsoft/mgt-components/dist/es6/components/components.js @ ./node_modules/@microsoft/mgt-components/dist/es6/exports.js @ ./node_modules/@microsoft/mgt-react/dist/es6/index.js @ ./lib/webparts/helloWorld/components/HelloWorld.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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
@ ./node_modules/lit/directives/if-defined.js 1:0-47 1:0-47 @ ./node_modules/@microsoft/mgt-components/dist/es6/components/mgt-picker/mgt-picker.js @ ./node_modules/@microsoft/mgt-components/dist/es6/components/components.js @ ./node_modules/@microsoft/mgt-components/dist/es6/exports.js @ ./node_modules/@microsoft/mgt-react/dist/es6/index.js @ ./lib/webparts/helloWorld/components/HelloWorld.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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
@ ./node_modules/lit/index.js 1:47-87 1:47-87 @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseTaskComponent.js @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g 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
@ ./node_modules/lit/index.js 1:30-47 @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseTaskComponent.js @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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
@ ./node_modules/@lit/task/index.js 1:0-71 1:0-71 1:0-71 1:0-71 1:0-71 @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseTaskComponent.js @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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
@ ./node_modules/lit/decorators.js 1:488-558 1:488-558 @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseProvider.js @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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
@ ./node_modules/lit/decorators.js 1:415-488 1:415-488 @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseProvider.js @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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
@ ./node_modules/lit/decorators.js 1:240-295 1:240-295 @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseProvider.js @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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
@ ./node_modules/@lit/reactive-element/decorators/property.js 1:0-72 6:47-48 6:71-72 @ ./node_modules/lit/decorators.js @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseProvider.js @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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
@ ./node_modules/lit/directives/repeat.js 1:0-43 1:0-43 @ ./node_modules/@microsoft/mgt-components/dist/es6/components/mgt-file-list/mgt-file-list.js @ ./node_modules/@microsoft/mgt-components/dist/es6/components/components.js @ ./node_modules/@microsoft/mgt-components/dist/es6/exports.js @ ./node_modules/@microsoft/mgt-react/dist/es6/index.js @ ./lib/webparts/helloWorld/components/HelloWorld.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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
@ ./node_modules/lit/decorators.js 1:295-354 1:295-354 @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseProvider.js @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js ./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

@ ./node_modules/lit/decorators.js 1:354-415 1:354-415 @ ./node_modules/@microsoft/mgt-element/dist/es6/components/baseProvider.js @ ./node_modules/@microsoft/mgt-element/dist/es6/index.js @ ./lib/webparts/helloWorld/HelloWorldWebPart.js

Expected behavior: - version 4.0.1 should work with SPFx

Actual behavior:- version 4.0.1 is not working whereas version 3.1.3 is working fine.