search

microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
944 stars 301 forks source link

Issue in using Microsoft Graph Toolkit in SPFx [BUG] #3087

Closed HarminderSethi closed 7 months ago

HarminderSethi commented 7 months ago

Describe the bug 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

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior version 4.0.1 should work with SPFx 1.18.x.

gavinbarron commented 7 months ago

It looks like you're missing the new gulpfile modifications that are required to use es2021 JavaScript in your project. https://learn.microsoft.com/en-us/graph/toolkit/get-started/build-a-sharepoint-web-part?tabs=react#configure-webpack

Note that if you development environment is Windows then the function listed there is not quite right due to the strings in litFolders using Unix path separators and not Windows path separators.

HarminderSethi commented 7 months ago

@gavinbarron I followed the same steps provided in the link but was still facing the issue. The issue is fixed after following the steps provided in https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/3055

phettz commented 7 months ago

@HarminderSethi If you are on windows its probably a path issue, I had to change the litFolders variable:

const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const litFolders = [
  path.join(nodeModulesPath, 'lit'),
  path.join(nodeModulesPath, '@lit'),
  path.join(nodeModulesPath, 'lit-html'),
  path.join(nodeModulesPath, 'lit-element'),
];

And if you are using spfx-fast-serve you also have to update your webpack.extend.js file in the fast-serve folder:

/*
* User webpack settings file. You can add your own settings here.
* Changes from this file will be merged into the base webpack configuration file.
* This file will not be overwritten by the subsequent spfx-fast-serve calls.
*/

const path = require('path');

// you can add your project related webpack configuration here, it will be merged using webpack-merge module
// i.e. plugins: [new webpack.Plugin()]
const webpackConfig = {

}

// for even more fine-grained control, you can apply custom webpack settings using below function
const transformConfig = function (initialWebpackConfig) {
    // Define the paths to include for babel-loader processing
    const litFolders = [
      path.resolve('node_modules/lit'),
      path.resolve('node_modules/@lit'),
      path.resolve('node_modules/lit-html'),
      path.resolve('node_modules/lit-element'),
    ];

    // Add a rule for processing JS files with babel-loader
    initialWebpackConfig.module.rules.push({
      test: /\.js$/,
      include: resourcePath => litFolders.some(litFolder => resourcePath.includes(litFolder)),
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            '@babel/plugin-transform-optional-chaining',
            '@babel/plugin-transform-nullish-coalescing-operator',
            '@babel/plugin-transform-logical-assignment-operators'
          ]
        }
      }
    });

    return initialWebpackConfig;
  }

module.exports = {
  webpackConfig,
  transformConfig
}