Failed to load component in SharePoint Framework

This blog shows you the solution for loading error in SharePoint Framework

On developing the SharePoint Framework web part, we may receive the below error message SPFxon loading the web part in the page.

[SPLoaderError.loadComponentError]:

***Failed to load component “2a602d35-fbae-40d3-80f3-4a2afa1e514b” (HelloWorldWebPart).
Original error: ***Failed to load entry point from component “2a602d35-fbae-40d3-80f3-4a2afa1e514b” (HelloWorldWebPart).
Original error: Error loading https://component-id.invalid/2a602d35-fbae-40d3-80f3-4a2afa1e514b_0.0.1
Cannot find module “@ms/sp-telemetry”

***INNERERROR:
***Failed to load entry point from component “2a602d35-fbae-40d3-80f3-4a2afa1e514b” (HelloWorldWebPart).
Original error: Error loading https://component-id.invalid/2a602d35-fbae-40d3-80f3-4a2afa1e514b_0.0.1
Cannot find module “@ms/sp-telemetry”
***CALLSTACK:
Error
at SPError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:10183:9)
at SPLoaderError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:4211:9)
at ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3821:9)
at ErrorBuilder.buildLoadComponentError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3743:9)
at Anonymous function (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:7952:9)

Root Cause:
The above issue may raise due to the incorrect reference in the code. For me I have tried to call the webpartcontext code and I have use the below references in the code.

[code lang=”js”]

import IWebPartContext from ‘@microsoft/sp-webpart-base/lib/core/IWebPartContext’;
import SPHttpClient from ‘@microsoft/sp-http/lib/spHttpClient/SPHttpClient’;

[/code]

Solution:
To resolve the issue, I have added the below references by replacing the above code

[code lang=”js”]

import { IWebPartContext } from ‘@microsoft/sp-webpart-base’;
import { SPHttpClient } from ‘@microsoft/sp-http’;

[/code]

Shantha Kumar
Shantha Kumar
Articles: 277

24,849 Comments

  1. interesting i have same issue however I am not sure where to replace it. I am not a developer and not sure how to use the code from GitHub for content-query-webpart
    https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-content-query-webpart

    I am getting error after adding it to a page.
    [SPLoaderError.loadComponentError]:

    ***Failed to load component “ac515af1-4490-4c7b-8191-d49b41b26c5e” (ContentQueryWebPart).

    Original error: ***Failed to load URL ‘https://localhost:4321/lib/webparts/contentQuery/loc/en-us.js’ for resource ‘contentQueryStrings’ in component ‘ac515af1-4490-4c7b-8191-d49b41b26c5e’ (ContentQueryWebPart). There was a network problem.

    Can you please help me?

  2. import { IWebPartContext } from ‘@microsoft/sp-webpart-base’;
    import { SPHttpClient } from ‘@microsoft/sp-http’;

    Where i can add this code??

    Please explain?

  3. Hello,
    We encountered the same problem.
    We used the Azure App Proxy with Windows Integrated Authentication.
    The issue said “This may be a problem with a HTTPS certificate. Make sure you have the right certificate.”
    The https issue used the local url and not the defined msappproxy.net.
    Can we add values in DSN certificate? Is there another solution?
    Thank you.

  4. Hey, I do have same issue. Could you please explain me where I need to keep this code which you mentioned in above. Because I downloaded direct .sppkg file and uploaded into apps catalog and then deployed. When I tried to add search web part to page, this error got happened. Please explain me how to open the code of that package and where I need to edit.

  5. I am having the same issue as Saroj, I downloaded the .sppkg version 1.1 directly, uploaded to my tenant & am seeing that error. Older versions have worked fine. Any ideas?

Comments are closed.