Skip to main content

Web Parts not loading due to SharePoint public CDN issues

BindTuning Team avatar
Written by BindTuning Team
Updated over 2 months ago

Occasionally, you might find one or more of your SharePoint Web Parts (especially those powered by SPFx) displaying as a blank square, an unrendered component, or an unexpected block of text, rather than their intended content. This often indicates a synchronization issue with SharePoint's Public Content Delivery Network (CDN), where essential Web Part files are not correctly loaded or cached.

The symptom

Instead of your functional Web Part, you may see a visual anomaly such as:

  • A blank square or empty placeholder where the Web Part should be.

  • A section displaying only raw text or an error message about missing files or components.

  • The absence of the Web Part entirely, where it previously existed.

The problem: SharePoint Public CDN and File Sync

SharePoint Online utilizes a Public CDN to optimize the delivery of static assets, including JavaScript, CSS, and other files used by SPFx Web Parts. While highly efficient, in rare instances, due to caching inconsistencies or propagation delays, a critical file belonging to a Web Part might fail to sync or become inaccessible. When this occurs, the browser cannot fully render the Web Part, leading to the symptoms described above.

The solution: manually syncing Web Part files

Prerequisites

Before proceeding with the solution, ensure you have:

  • Access to BindTuning App: Your BindTuning account credentials to download Web Part packages.

  • SharePoint Administrator Permissions: Permissions to upload and modify files within your SharePoint Online App Catalog (specifically, the ClientSideAssets library).

To resolve this issue, you will manually ensure all necessary Web Part files are correctly placed in your SharePoint App Catalog's client-side assets library.

Step 1: Download and prepare the Web Part package

  1. Log in to the BindTuning App > WebParts.

  2. Hover the desired web part, click the ellipsis, and "Download" the package.

  3. Once downloaded, extract the contents of the ZIP folder.

  4. Locate file SPFx > Office 365 > *.sppkg.

  5. Rename the .sppkg file to a .zip file.

  6. Extract the contents of this newly renamed .zip file.

  7. Open the extracted folder and locate the ClientSideAssets folder. Keep this folder open, as it contains the files you'll need.

  8. Inside the ClientSideAssets folder, open the manifest.json file. You will find the id field, which represents the Product ID (e.g., "id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"). Make a note of this ID, it will be needed for Step 3.

IMG002.png

Step 2: Access your SharePoint App Catalog's Client-Side Assets library

You need to navigate to the ClientSideAssets library within your organization's SharePoint App Catalog.

Method A: If you know your App Catalog's URL (Recommended):

  • The direct URL typically follows this format:

    https://[yourtenant]-admin.sharepoint.com/sites/[tenantcatalog]/ClientSideAssets/AllItems.aspx

  • Go directly to this URL in your browser. If successful, proceed to Step 3.

Method B: If you don't know your App Catalog's name:

  1. From your M365 app launcher (the "waffle" icon), click on the "Admin" app.
    ​

  2. In the Microsoft 365 admin center, locate "Show all" in the left navigation, then under "Admin centers," click "SharePoint."
    ​

  3. Go to "Active sites" under "Sites" in the left navigation.

  4. In the "Templates" column, select "Filter by Template" and then choose "App Catalog Site."

  5. You will find the name of your App Catalog in the list. Note its URL or its name.
    ​

  6. Construct the full URL to its ClientSideAssets library using the format:
    ​https://[yourtenant]-admin.sharepoint.com/sites/[tenantcatalog]/ClientSideAssets/AllItems.aspx and navigate to it.

Step 3: Locate or create the Product ID folder

Once you have the ClientSideAssets library open in your browser:

  1. Look for a folder with the exact name of the Product ID you noted in Step 1 (e.g., xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx). We will refer to this as the "ID folder."

  2. If the ID folder does not exist:

    • Click "+ New" in the SharePoint library ribbon.

    • Select "Folder."

    • Rename the new folder with the exact Product ID.

Step 4: Upload missing files

  1. Open the "ID folder" (whether it exists or you just created it).

  2. Drag and drop all the content from the ClientSideAssets folder (that you prepared in Step 1) directly into this "ID folder" in your SharePoint App Catalog.

  3. When prompted, choose to "Replace" any duplicate files. You will notice that there are one or more extra files from your local ClientSideAssets folder that are not duplicated; this is normal, as it signifies the missing component(s).
    ​

Step 5: Clear browser cache and hard refresh

Finally, to ensure your browser loads the updated files:

  1. Go back to the SharePoint site where the Web Part was experiencing issues.

  2. Right-click on the browser's refresh icon (usually next to the URL bar).

  3. From the context menu, select "Clear Cache and Hard Refresh" (the exact wording may vary slightly by browser, but this is the common option for a full reload that bypasses cache).

Important notes on CDN caching:

Please be aware that SharePoint's Public CDN can take around 6 hours to fully update its cache. This means that while your manual file upload should provide an immediate fix, the issue might take a few hours to resolve completely across all users. In some cases, finding a specific missing file and performing a "check out" and "check in" action on it might expedite the CDN update. If the problem persists beyond this timeframe (e.g., 6-12 hours), please contact [email protected] for further assistance.

Did this answer your question?