Unable to the load the Custom Application (.sppkg file) on SharePoint Pages and Microsoft Teams Application

[sandhyar66]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

other (enter in the "Additional environment details" area below)

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
  -Microsoft Edge : 102.0.1245.44 (Official build) (64-bit)

• Chrome-102.0.5005.115 (Official Build) (64-bit)

• SPFx version : 1.14.0

• Node.js version : 14.16.0

• etc

Describe the bug / error

Uploaded the .sppkg file to SharePoint App Catalog and added the app to the SharePoint Pages.
The error is as shown in the Attached File:

Error Message:
Something went wrong
If the problem persists, contact the site administrator and give them the information in Technical Details.
TECHNICAL DETAILS
[SPLoaderError.loadComponentError]:
Failed to load component "023bf4aa-bc08-4534-a8ca-4dbefbe3e1b2" (DwpWebPart). Original error: Failed to load URL 'https://publiccdn.sharepointonline.com/dtwipro.sharepoint.com/sites/appcatalog/ClientSideAssets/24a68d9a-a909-4f00-afd1-24bc3cf71a9d/dwp-web-part_c010bd1660160519832e.js' for resource 'dwp-web-part' in component '023bf4aa-bc08-4534-a8ca-4dbefbe3e1b2' (DwpWebPart). There was an error requesting the file.

INNERERROR:
Failed to load URL 'https://publiccdn.sharepointonline.com/dtwipro.sharepoint.com/sites/appcatalog/ClientSideAssets/24a68d9a-a909-4f00-afd1-24bc3cf71a9d/dwp-web-part_c010bd1660160519832e.js' for resource 'dwp-web-part' in component '023bf4aa-bc08-4534-a8ca-4dbefbe3e1b2' (DwpWebPart). There was an error requesting the file.
CALLSTACK:
Error
at t [as constructor] (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_6b3ba9b92f0aab063b870bb4542f59a7.js:70:214899)
at new t (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_6b3ba9b92f0aab063b870bb4542f59a7.js:71:7680)
at e.buildErrorWithVerboseLog (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_6b3ba9b92f0aab063b870bb4542f59a7.js:71:44944)
at e.buildLoadComponentError (https://res-1.cdn.office.net/files/sp-client/sp-pages-assembly_en-us_6b3ba9b92f0aab063b870bb4542f59a7.js:71:41035)
at https://res-1.cdn.office.net/files/sp-client/chunk.systemjs-component-loader_en-us_dc58eaaa7aaff14eda18.js:1:6012

Steps to reproduce

Case 1:

1. Generate a build using Teams Toolkit
2. Upload the .sppkg file to the SharePoint App Catalog
3. Add the app to any SharePoint Page
4. The error message is shown : Something Went Wrong
   

Case 2:

1. Generate a build using Teams Toolkit

2. Upload the .sppkg file to the SharePoint App Catalog

3. Click on Sync To Teams Option

4. The Error Code : 400 is as shown in the screenshot below:
   

5. Also, Error is shown when trying to open the application on Microsoft Teams Application -

Expected behavior

The App should launch without any errors in both the SharePoint Pages and Microsoft Teams Custom Application

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

sandhyar66 - thank you for reporting the issue!
Could you please check few things?

• if you use SPFx Yeoman Generator instead of Teams toolkit - does the error exist?
• Could you please check your O365 CDN configuration (what origins are allowed, what file types are allowed): https://docs.microsoft.com/en-us/microsoft-365/enterprise/use-microsoft-365-cdn-with-spo?view=o365-worldwide#set-up-and-configure-the-office-365-cdn-by-using-the-sharepoint-online-management-shell?

[sandhyar66]

Alex Terentiev (@AJIXuMuK), Thank you for your response.

1. The Custom Application started working after repeating the package generation process using both the Teams Toolkit and SPFx Yeoman Generator options for 2 to 3 times.
2. The Origins allowed includes:

• */MASTERPAGE
• */STYLE LIBRARY
• */CLIENTSIDEASSETS

The File Types - Public allowed includes:

• IncludeFileExtensions: CSS,EOT,GIF,ICO,JPEG,JPG,JS,MAP,PNG,SVG,TTF,WOFF,WOFF2
• ExcludeRestrictedSiteClassifications:
• ExcludeIfNoScriptDisabled: False

Please do let me know if additional details are required.
Also, Kindly let me know what could be the root cause for this Issue, if you have analyzed any of them.

[AJIXuMuK]

sandhyar66 - As it started working I may assume you were trying to load the application right after deploying it.
CDN often takes time to make new bits available.

[sandhyar66]

Alex Terentiev (@AJIXuMuK)
Yes, Certainly you are right.
But I have also tried to load the application after a duration of 48 hours of Deployment. The error was still the same.
It is then, I have raised a concern regarding this issue.
So, trying to understand the root cause so that it could be resolved easily the next time we face similar issues.