Sp-dev-docs: [SPWebPartErrorCode.ScriptLoadError]: Unable to load web part WebPart.HelloWorldWebPart.c585a6e1-3fa3-4d85-84ae-09cf23a1d26d,Error: ***Failed to load component "d16f9b2b-8baa-4de8-8152-6f949881731d" (HelloWorldWebPart). Original error: ***loadComponent() returned an empty object for component "d16f9b2b-8baa-4de8-8152-6f949881731d" (HelloWorldWebPart). script resources due to: {1}.

[samikroy]

Category

• [ ] Question
• [ ] Typo
• [ ] Bug
• [ ] Enhancement / Suggestion
• [ ] Additional article idea

Expected or Desired Behavior

The client web part should render seamlessly in Workbench & when added to a SharePoint modern page.

Observed behaviour

While deploying the client web part it works fine in Workbench (in local & SPO) but when added to page throws the below error. Purpose of the web part is to display the lists from the web.
Reference - https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint

_Error on the screen_

Something went wrong

If the problem persists, contact the site administrator and give them the information in Technical Details.
TECHNICAL DETAILS
Original error: *loadComponent() returned an empty object for component "d16f9b2b-8baa-4de8-8152-6f949881731d" (HelloWorldWebPart). script resources due to: {1}.

*CALLSTACK:
Error
at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-03-24.019/sp-loader_en-us_88099c3e845cf05dbb2b3602b6d4e5d2.js:88:24908)
at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-03-24.019/sp-webpart-base_en-us_ea1d2fc1794a0d5808491fbb184025f0.js:146:25299)
at Function.t.create (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-03-24.019/sp-webpart-base_en-us_ea1d2fc1794a0d5808491fbb184025f0.js:146:25740)
at e._handleModulePromiseRejection (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-03-24.019/sp-webpart-base_en-us_ea1d2fc1794a0d5808491fbb184025f0.js:146:56929)
at https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-03-24.019/sp-webpart-base_en-us_ea1d2fc1794a0d5808491fbb184025f0.js:146:47212
Feedback

Error in Console

sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1 Theming value not provided for "infoText". Falling back to "#333333".
(anonymous) @ sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1
sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1 Theming value not provided for "warningBackground". Falling back to "#fff4ce".
(anonymous) @ sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1
sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1 Theming value not provided for "warningText". Falling back to "#333333".
(anonymous) @ sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1
sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1 Theming value not provided for "severeWarningBackground". Falling back to "#fed9cc".
(anonymous) @ sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1
sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1 Theming value not provided for "severeWarningText". Falling back to "#333333".
(anonymous) @ sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1
sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1 Theming value not provided for "severeWarning". Falling back to "#d83b01".
(anonymous) @ sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1
2sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1 Theming value not provided for "errorText". Falling back to "#333333".
(anonymous) @ sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1
sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1 Theming value not provided for "successText". Falling back to "#333333".
(anonymous) @ sp-application-base_e6affb0fe88e50980b197f4232a6b09c.js:1
sp-loader_en-us_88099c3e845cf05dbb2b3602b6d4e5d2.js:81 Address not found for module name: https://relative-path.invalid/@microsoft/sp-http. Using it as absolute URL.
sp-http Failed to load resource: net::ERR_TUNNEL_CONNECTION_FAILED
sp-loader_en-us_88099c3e845cf05dbb2b3602b6d4e5d2.js:88 [1491473002618][Shell.SPHttpClient] POST https://MYTENANTURL/sites/devsite/_api/signalstore/signals
sp-loader_en-us_88099c3e845cf05dbb2b3602b6d4e5d2.js:81 Address not found for module name: https://relative-path.invalid/@microsoft/sp-http. Using it as absolute URL.
sp-http Failed to load resource: net::ERR_TUNNEL_CONNECTION_FAILED
sp-loader_en-us_88099c3e845cf05dbb2b3602b6d4e5d2.js:81 Address not found for module name: https://relative-path.invalid/@microsoft/sp-http. Using it as absolute URL.
sp-http Failed to load resource: net::ERR_TUNNEL_CONNECTION_FAILED
NewPage.aspx:1 The resource https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-03-24.019/sp-filepicker_en-us_ce67f0838e1bf1e5206e3716c11f84e6.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
NewPage.aspx:1 The resource https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-03-24.019/sp-html-embed_en-us_203a49b4586f726e8887cdd6f307099d.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
sp-loader_en-us_88099c3e845cf05dbb2b3602b6d4e5d2.js:81 Address not found for module name: https://shellprod.msocdn.com/16.00.1713.002/en-US/JSC/CoreMinShellG2BundleA.js. Using it as absolute URL.

Steps to Reproduce

Referred this article to develop the webpart
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint

If the below function is removed, it renders properly

private _getListData(): Promise {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + /_api/web/lists?$filter=Hidden eq false, SPHttpClient.configurations.v1)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}

Thank you for your help !!!

[akshayBe]

same here .... Typescript / gulp returns no error while compiling/ running the project but webpart throws error in SPO page

[spplante]

Same here, I have the error when using "SPComponentLoader" or when setting external references through the config.json file and require them by code using require("myFile"). Everything works fine in the workbench and then I get this https://relative-path.invalid error when connected to SharePoint...

[mpasarin]

Hello,
Could you share the manifest you are using to load the webpart?

I have the suspicion that you uploaded a manifest for the code without usage of sp-http and then you changed the code to use sp-http.
When you add the code that use sp-http and re-build, a new dependency is added: "@microsoft/sp-http". The manifest must be updated accordingly.

Can you make sure to follow the following steps to reproduce the problem: Re-build ('gulp', re-package ('gulp package-solution'), re-upload+deploy on the app catalog (Remove the old one, add the new one), re-install in the site, and then test again.

If the uploaded manifest has indeed a dependency on "@microsoft/sp-http" with a 1.x.x version, you might be having another problem, but reading the manifest will help to diagnose this.

[spplante]

@mpasarin you are 100% correct, at least for my case. I did add an import in my code to use the SPComponentLoader and I was expecting the gulp serve task to pick up the changes and that's it...But you are right I had to redeploy the app and it solved the problem. Thanks!

[samikroy]

in my case, files need to be hosted into azure while adding to a SPO site page, other than workbench.
SharePoint site page was not able to render from local resources.
Thank you all for your help & support.

[sps-smith]

@mpasarin you saved my day. After numerous searches, the cause of the issue was exactly as stated. In my case I am hosting my spfx webpart in Microsoft Teams. Thanks!

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues