ERROR IN in my SPFX WebPart : Module parse failed: Unexpected token You may need an additional loader to handle the result of these loaders

I have created an SPFx project with reactJS. I am using .jsx extension – functional components.

Now, the spfx webpart is already working fine, but I saw a material kit that I want to reuse its components.

When I referenced the components, I am presented with this error

***Failed to load component (WebPart). Original error: ***Failed to load entry point from component WebPart). Original error: Module parse failed: Unexpected token (30:4)
File was processed with these loaders:
You may need an additional loader to handle the result of these loaders.

enter image description here

It seems that I cannot use the “footer” tag?

enter image description here

Fetching Specific User’s Profile Photo via Graph API in SPFX

How can we fetch a user profile photo through Graph API and display into Web part in SPFX?

Here is my function to call Graph API to fetch Specific user’s Profile Photo filtering through their UserPrincipleName:

private image() {
    .then((graphclient:MSGraphClient): void=>{
    let binaryData = ();
    const blobUrl = window.URL.createObjectURL(new Blob(binaryData, {type: "image/jpeg"}));
    document.getElementById('user-img').setAttribute("src", blobUrl );

Is their any way to display the API Response Image into a Web part?

In the API Call .api('/users/$value') when removing “$value” at the endpoint:

Response at console

    "@odata.context": "$metadata#users('')/photo/$entity",
    "@odata.mediaContentType": "image/jpeg",
    "@odata.mediaEtag": ""5725BAEE"",
    "id": "360X360",
    "height": 360,
    "width": 360

Without removing “$value” at the endpoint, I am getting null in the console.

spfx – Get list of Document Libraries in dropdown from SharePoint Library

I would like to upload files using SPFx script editor or SPFx web part, but first I would like to retrieve parent libraries in dropdown list, second based on parent library selection I should retrieve all sub folders and again based on sub-folder selection I should retrieve Sub-Folders1 goes on if we have more.

So I have to upload files doesn’t matter which selection(if parent or sub-folders). If possible to retrieve folders from Document libraries using Rest API in Dropdown list.


DropDown1: Parent-Folders – Example1,Example2,Example3…

DropDown2: Sub-Folders(based on Parent selection) – Example1.1, Example2.1, Example3.1.. (Possibility to upload files here)

DropDown3: Sub-Folders(based on Sub-fol selection) – Example1.1.1, Example2.1.1, Example3.1.1.. (Possibility to upload files here)

SPFx: Min Width headers SharePoint Document Library web part SharePoint Online

I am new to spfx but not to SharePoint. Has anyone been able to get min width to work for headers for all users in a Document Library view web part? I need to show all documents from a view and need the ability to filter a Category field but have the requirement for the headers to stay a certain width or at least not be smaller than a certain width for ALL users. As most are aware, even using JSON to set the min width when formatting a view doesn’t work for all users. I see the width as it was set but another user sees the width smaller than the mid width set. Is there anything through PnP SPFx that I am not finding? What I need is a forms repository view (library) with the Category field filterable on the top page of the site but with the headers at a min width of 1000 px for everyone. Any help is very much appreciated.

sharepoint online – SPFX React npm WARN tar ENOENT: no such file or directory

I am trying to work on this react list form link , but when i try to do npm install i am getting all these errors below, i checked an article where they mentioned delete package-lock.json file but still no use. Any suggestions or thoughts on this ? Please let me know.

npm WARN tar ENOENT: no such file or directory, open ‘’

npm WARN tar ENOENT: no such file or directory, open ‘’


spfx – on my SharePoint local Workbench, the ribbon won’t show up and I don’t know why

I’m currently working with the local SharePoint workbench and it looks a little weird, because the ribbon with the text SharePoint Workbench is not visible and I don’t know why.

I hope that you can help me. It’s just a visual problem, but I appreciate your help.

Attached is a screenshot in Chrome.enter image description here

Best regards


spfx – Sharepoint on prem 19 not getting all recurrence events in calendar

I am getting events with the help of a query and it is working ok. But I get only one item from the recurrence item even tho I have <ExpandRecurrence> tag set to true. What am I doing wrong? If my view is set to a Calendar and not AllItems view I am getting multiple items from the recurrence but only for one month. Is there a way to combine the two of them or use AllItems view and get recurrence items as in the Calendar view? I am using sharepoint 19 on prem and sp-pnp-js library.

My code:

let data = await pnp.sp.web.lists
                      <FieldRef Name="EventDate"/>
                      <Value Type="DateTime">` +
                        firstDay.toLocaleDateString("sl-SI",{year: "numeric"}) + "-" + firstDay.toLocaleDateString("sl-SI",{month: "2-digit"}) + "-" + firstDay.toLocaleDateString("sl-SI",{day: "2-digit"}) +
                        //"2021-03-01" +
                      <FieldRef Name="EventDate"/>
                        <Value Type="DateTime">` +
                           lastDay.toLocaleDateString("sl-SI",{year: "numeric"}) + "-" + lastDay.toLocaleDateString("sl-SI",{month: "2-digit"}) + "-" + lastDay.toLocaleDateString("sl-SI",{day: "2-digit"}) + 
                          //"2021-04-01" +

sharepoint online – SPFX Application customizer extension fail on partial updates of our pages

I want to inject some CSS to my SharePoint page, so I follow those steps @ to create SPFX Application customizer extension, where i did the following:-

md app-extension
cd app-extension
yo @microsoft/sharepoint

What is your solution name?: app-extension
Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
Which type of client-side component to create?: Extension
What is your Application Customizer name? HelloWorld
What is your Application Customizer description? HelloWorld description

then i added the following code inside the .ts:-

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import {
} from '@microsoft/sp-application-base';
import { Dialog } from '@microsoft/sp-dialog';

import * as strings from 'HelloWorldApplicationCustomizerStrings';

const LOG_SOURCE: string = 'HelloWorldApplicationCustomizer';

 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the object.
 * You can define an interface to describe it.
export interface IHelloWorldApplicationCustomizerProperties {
  // This is an example; replace with your own property
  cssurl: string;
  scripturl: string;

/** A Custom Action which can be run during execution of a Client Side Application */
export default class HelloWorldApplicationCustomizer
  extends BaseApplicationCustomizer<IHelloWorldApplicationCustomizerProperties> {


    public onInit(): Promise<void> {, `Initialized ${strings.Title}`);
      const cssUrl: string =;
      const scriptUrl: string =;

      const url = window.location.href;
      if (cssUrl && url.toLowerCase()=="https://t****") {
          // inject the style sheet
          const head: any = document.getElementsByTagName("head")(0) || document.documentElement;
          let customStyle: HTMLLinkElement = document.createElement("link");
          customStyle.href = cssUrl;
          customStyle.rel = "stylesheet";
          customStyle.type = "text/css";

          const head2: any = document.getElementsByTagName("head")(0) || document.documentElement;
          head.insertAdjacentElement("beforeEnd", customStyle);
          head2.insertAdjacentHTML("beforeEnd", '<META HTTP-EQUIV="refresh" CONTENT="300">');


      return Promise.resolve();

and the following inside the elements.xml:-

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="">

So as shown in the above code I am specifying to only attach the cusotm css if the window.location.href = the url of the home page which is https://t**** in our case. now the above is working on most cases but is failing on the following cases:-

  1. let say i am inside the Pages library >> then I click on the “Home” link to open the home page, as follow:-

enter image description here

this will do a partial update to the page and will load the home page content without causing the whole page to load >> where in this cases the SPFX extension will not run.

  1. second case>> if I am inside the home page and the SPFX has loaded the custom css file correctly >>then i click on a page inside the news web part >> this will open the news page without refreshing the page >> which will cause the SPFX to run on the news page (which is not the home page)…

so my question is how I can force the SPFX extension to run on partial updates to check the page url, to avoid the above 2 issues?

Thanks in advance for any help.