Some SharePoint web parts don’t always show up until the page is refreshed

Additional environment details

• SPFx version: 1.18.2
• React version: 17.0.1
• Fluent UI version: 8.106.4
• Node version: 16.x / 18.x

Issue description

We are experiencing an intermittent rendering issue with an SPFx solution (v1.18.2) containing five custom web parts.

The solution builds successfully and deploys to the App Catalog without errors. All web parts can be added to a modern page as expected. However, the following behavior occurs:

1. When loading the site in a new browser tab (by pasting the site URL and pressing Enter), the top two or three web parts occasionally do not render.
2. If the page is refreshed, the web parts load correctly.
3. If navigating away from the page and then returning, one or more web parts may again be missing.
4. No errors are logged in the browser console, but the web part placeholders are absent from the DOM.

Questions:

1. What are the potential root causes of web parts disappearing intermittently in SPFx 1.18.2 with no console errors?
2. Could unused dependencies (e.g., lucide-react or overlapping icon libraries) impact SPFx bundle loading or rendering?
3. Are there known issues with SPFx 1.18.2, React 17, or Fluent UI v8 in scenarios where multiple custom web parts are loaded on the same page?

Before: After:

Hello @VasuVL, Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

Hello @VasuVL, Thanks for sharing the environment details. Could you also let us know:

• Have you tested the solution with SPFx 1.18.3 to see if the behavior persists?
• Does the issue still occur if only a single web part is added on a page?

Thanks!!

Hi @Amey-MSFT Thank you for sharing the environment details and your suggestions.

1. We have not yet tested the solution with SPFx 1.18.3. We will carry out the testing and share the results with you shortly.

2. We have observed that the issue occurs both when multiple web parts are added and also when only a single web part is added to the page.

Hi @Amey-MSFT Upon reviewing the documentation, we found that SPFx version 1.18.3 is not available for upgrade

@VasuVL, To help us reproduce the issue more efficiently, could you please share a minimal version of your SPFx solution (or a sample project) where the rendering issue occurs?

This will greatly speed up our investigation and help us pinpoint any potential root causes more accurately.

Hi @Ashlesha-MSFT These are all the dependencies used in my SPFx project.

"dependencies": { "@fluentui/react": "^8.106.4", "@microsoft/sp-component-base": "1.18.2", "@microsoft/sp-core-library": "1.18.2", "@microsoft/sp-lodash-subset": "1.18.2", "@microsoft/sp-office-ui-fabric-core": "1.18.2", "@microsoft/sp-property-pane": "1.18.2", "@microsoft/sp-webpart-base": "1.18.2", "@pnp/spfx-property-controls": "^3.21.0", "autoprefixer": "^10.4.21", "date-fns": "^2.30.0", "clsx": "^2.1.1", "embla-carousel-react": "^8.6.0", "lucide-react": "^0.526.0", "postcss": "^8.5.6", "react": "17.0.1", "react-dom": "17.0.1", "tailwindcss": "^3.4.17", "tslib": "2.3.1" },

@VasuVL, The dependencies and manifest settings you listed are generally compatible for SPFx 1.18.2, React 17, and Fluent UI v8. The issue of web parts intermittently not rendering (with no console errors and missing DOM placeholders) is most often caused by:

• Global CSS (e.g., Tailwind) or third-party styles affecting layout/visibility.
• Multiple React instances bundled (should be externalized in SPFx).
• Large bundles or network race conditions causing partial loads.
• Silent runtime errors inside a web part (not always logged).

@VasuVL We were experiencing the same problem in one of our solutions. Tried this workaround and it seemed to have fixed it. Maybe a possible workaround until the bug is resolved?

I'm getting something similar in SPFx verion 1.21.1. As in #10384, I had moved code out of the onInit, and it started working again. Particurlarly, I had removed a chain of Promises that I returned to the onInit that I moved out. I think this is what's causing the issue because in #10384 there were several things being awaited in their onInit as well.

Also, my setup includes several (20-30) of these webparts on the same page: on some page loads a few will load while the rest will not load, other times none will load, still other times all but one will load.

Consider an example of an event that is set up on the onInit and the onInit returns with a chain of promises that accesses some resources before it completes. Then while the returned promises are being run, the event then fires with it's own chain of promises to execute. I expected the event's promise chain to complete, but on webparts that fail, the promise stops right before it gets to the next .then. I didn't think that was possible in a browser.

Another update: it looks like the issue still occurs, even with the mitigations, just significantly less. Also some added information: the webparts that are affected the most are webparts that are outside of the browser window, but note that I disabled the lazy loading for these by setting up dynamic data for them, so they should still run.