Sp-dev-docs: react-dom causes infinite Loading animation (intermittently)

Created on 4 Dec 2018 · 9Comments · Source: SharePoint/sp-dev-docs

Expected or Desired Behavior

External custom library with react-dom as a dependency should not break SPFx 1.6.0 webparts.
It now does.

Observed Behavior

We're using custom javascript library (published in our private npm feed) to build SPFX webparts. It has peer dependencies of react-dom (in webpack.config.js react and react-dom are "external") and react, as well as SPFx's @microsoft/* libraries (also peer and also "external").
This library is added to SPFx solution as external in config\config.json.

On Monday we started to notice our webparts displaying Loading ... forever sometimes when you refresh the page. No errors are seen in console and not http request has failed.
After some time debugging we were left with single exported class which had ReactDOM.render method.

Having anything related to react-dom causes Loading ... to appear sometimes (every 3-4 page refreshes). As soon as code related to react-dom is commented out this issue never happens.
It kinda looks like a version conflict, because it only true for SPFx 1.6.0 solutions, but 1.7.0 works just fine.

This is how our page layout looks like:

<Webpart v1.6.0 - FAILS>
<Webpart v1.7.0 - OK>
<Webpart v1.6.0 - FAILS>

Every version 1.6.0 webpart is failing to load if any one of them fails.
It is only true when it has an external library with react-dom as a dependency!
Note: Even if webpart doesn't have our custom library, but on the page there is a webpart that does have it - they both fail loading.
Basically our custom external library breaks any SPFx webpart if it has version 1.6.0, because it has a dependency on react-dom.

Update, I created a library with only React and ReactDOM modules being written to console.
Here's the result:

When webpart fails you can see empty react-dom module.

spfx-general

Source

SharePickle

Most helpful comment

@SharePickle I went ahead and bit the bullet and updated our 17 web parts to 1.7.0 and the issue is resolved as you noted above.

In the following article the talk about DOM manipulation and saying it will break your web parts, not sure if you are doing that or not but if you don't want to cut over all of them try those first. https://developer.microsoft.com/en-us/sharepoint/blogs/verification-guidance-sharepoint-online-moves-to-react-16/

If you are going down the upgrade path check out this article from Andrew Connell, http://www.andrewconnell.com/blog/sharepoint-framework-v1-7-0-what-s-in-the-latest-update-of-spfx as well as the Office365 cli, https://pnp.github.io/office365-cli/, as it makes the upgrade process super easy.

anthonypoulin on 6 Dec 2018

👍2

All 9 comments

Hey Mr Pickle. Do you have a simple github sample I could pull and try?

patmill on 4 Dec 2018

Hey Mr Pickle. Do you have a simple github sample I could pull and try?

Here you go https://github.com/SharePickle/spfx-react-bug-demo.
See README.md from webpart folder.
Let me know if it won't work for you!

Edit: added screen capture just in case (also in repo).

SharePickle on 4 Dec 2018

👍1

Hey we are experiencing the same intermittent infinite loading as well. Every time the infinite loading occurs the following warning message appears: The resource */sites/apps/ClientSideAssets/a0a33fb7-226c-466e-a175-246b07fdc13e/popular-tools-web-part_790ed6d36d251bb5d49dad46e4833406.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

anthonypoulin on 5 Dec 2018

@anthonypoulin you are right, didn't notice it, too many warnings in console. Same message.
If you able to update spfx solution to 1.7.0 and react 16.3.2 it will resolve the issue by the way.

SharePickle on 5 Dec 2018

@SharePickle is the tenant your having issues in the GA or the Targeted Release group, I'm having issues replicating the errors in my development tenant which is set to Targeted Release but am seeing them in the GA.

anthonypoulin on 5 Dec 2018

@anthonypoulin getting on both standard and targeted releases. Dev and prod tenants. Ours and some of our clients.

SharePickle on 5 Dec 2018

@SharePickle I went ahead and bit the bullet and updated our 17 web parts to 1.7.0 and the issue is resolved as you noted above.

anthonypoulin on 6 Dec 2018

👍2

As the issue is resolved with the 1.7 upgrades, closing this one. If there are findings on this with the latest versions, let's open a new issue. Thanks, everyone for your investigation on this.

VesaJuvonen on 13 Dec 2018

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