Bug: Scripts injected by browser extensions (e.g. React dev tools) may cause hydration errors

[azangru]

My apologies if this is the wrong place to report the below; but I could not find a more appropriate place to get feedback from the React team. It seems that the below is going to be a common use case.

React version: 18.2.0

Description of the problem

Since I've started using the renderToPipeableStream api making React render the whole DOM tree starting from the html tag (inspired by Dan's demo; but now I can see a similar technique described in the beta docs), I've been seeing occasional hydration errors popping up in our error tracker. Since the html payload that I am rendering server-side is minuscule and limited to just the contents of the head tag, I was very puzzled as to the cause of the error. Even more puzzling was that the error occurred only occasionally, which made the diagnosis of the cause difficult. The fact that the production build of React is not even making it obvious which elements caused the mismatch made it harder still.

After a long time spent in debugging, I discovered that at least one possible cause of the hydration error is the script injected by react-devtools chrome extension:

Screenshot 1: React (in dev build) complaining about an unexpected script tag:

Screenshot 2: Debugger paused in the function that logs out the warning. The offending child node is a script tag.

Screenshot 3: The unexpected script tag is revealed to be injected by React devtools chrome extension to request react-devtools backend:

Screenshot 4: The script tag is injected after the body tag:

This raises several questions:

• In case of React devtools, should it add the suppress-hydration-warning attribute (an escape hatch suggested in the docs) to the script added by the chrome extension? Will it help if it did?
• Similar problems might potentially occur when using third-party scripts that modify the DOM (e.g. add script or style elements to the DOM). Another common example is webpack splitting CSS into small chunks and then adding link tags for the chunks into the head dynamically during client-side navigation. Is this a concern for situations when React is responsible for the whole html tree? Is there any advice from the React team regarding this?
• It looks like the recommended SSR option, according to the new docs, is renderToPipeableStream/renderToReadableStream, with React being in control of the whole html element. If third-party scripts are indeed a concern when React controls of the whole DOM tree, then what is the recommended api for server-side rendering? Perhaps this should be addressed in the docs?

[azangru]

Another debugging session of an unexpected behaviour in the development build (the page always was broken during the first load in a new browser tab, although always was fine upon refresh) revealed the same root cause — React dev tools chrome extension was injecting a script tag into the head of the document, which React was not expecting. In my case, that resulted in an irrecoverable hydration error — React got so confused that it called my component without passing it any of the props specified in the JSX, which was very difficult to debug:

Figure 1: the first child of the html element is a script tag injected by React dev tools:

Figure 2: React expected the first child of the html element to be head, as specified in the JSX: