React SPFx web part becomes invisible on random page refresh – Need help diagnosing issue

Hello Everyone,

I am facing a random rendering issue with a React SPFx web part (HelloWorld2) on SharePoint Online. The web part becomes invisible on page refresh, and I need help diagnosing the cause.

Setup Steps

1. Solution Source Code

Here is my source code and steps followed for deployment: https://github.com/JagtapY17/DemoProjects/blob/main/SPOnlineWP.zip

• Download and extract the SPFx solution
• Open the solution directory in the command prompt

Run the following commands:

npm install
gulp bundle --ship
gulp package-solution --ship

Retrieve the generated .sppkg file from:

• sharepoint/solution/sp-online-wp.sppkg

2. SharePoint Online Deployment

Steps performed in SharePoint Online:

• Created a new Community Site (Department template)
• Uploaded the .sppkg package into the App Catalog
• Added the app to the site (Site Contents → Add an app)
• Added the HelloWorld2 web part to the homepage (placed at the top)
• Added 8–9 other web parts below it on the page

Issue / Question

After adding the web part:

• The HelloWorld2 web part renders inconsistently on page refresh
• Out of 10 refreshes, 6–7 times the web part does not render at all
• Other web parts load fine every time
• No browser console errors appear
• It seems the web part gets skipped randomly during the page render pipeline

I request community members to:

• Check the provided solution package
• Review the HelloWorld2 web part code
• Suggest the possible cause of this intermittent non-rendering issue

Any insights or debugging suggestions will be greatly appreciated.

Thank you!

DemoProjects/SPOnlineWP.zip at main · JagtapY17/DemoProjects Projects for Testing . Contribute to JagtapY17/DemoProjects development by creating an account on GitHub.