[DevTools Bug]: CDN-based site not working

[ForbiddenEra]

Website or app

https://lcdev.shaped.ca

Repro steps

Dev tools not working in FF or Chrome, says "This page doesn't appear to be using react".

React is included via CDN as shown on react website https://reactjs.org/docs/cdn-links.html:
<script crossorigin="anonymous" src="https://unpkg.com/react@17/umd/react.development.js"></script>

Web Console on said page says:
Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[kouraf]

I am trying to reproduce the bug local with this code but it works fine !

[lunaruan]

Hey! Thanks for reporting an issue! Unfortunately, I can't repro your issue and your repro steps is not enough information for us to help. Could you link to the source code for your website?

[ForbiddenEra]

Hi,

I doubt anyone would be able to reproduce it locally. I have a feeling it's likely due to how Freeform framework distributes content; as XHTML5 (Content-Type: application/xhtml+xml - not something you can really simulate without a web server) though it could be related to something else, I often find many apps from big companies completely forget (including stuff from Google, for example, performing ToUpper() on tagnames for no good reason, which is not valid HTML) that this exists and is a valid, and IMHO, better, if unfortunately uncommon, method of serving content.

If you visit the site linked and view it's source, you can see that I'm including react from a CDN. This alone should enable the React dev tools, but it's greyed out on both FF and Chrome. This doesn't change even if a React component is actually running on the page, I can create, run and interact with components fine, but the React tools are always greyed out on both browser types even when a component is functioning.

The best way to maybe reproduce on a local server would simply be to view source, copy and paste into an xhtml file, make sure your webserver is setup to serve the xhtml file as the aforementioned content type and view it that way; though, this is why I provided a link to a deployed site where the issue is visible, so it could be immediately seen upon visiting.

[lunaruan]

Ah, thanks for the information! It looks like your intuition about the Content-Type is right. DevTools isn't injecting itself b'c of this check:

react/packages/react-devtools-extensions/src/injectGlobalHook.js

Lines 133 to 146 in f2a59df

	// Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
	// Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
	// We need to inject this code because content scripts (ie injectGlobalHook.js) don't have access
	// to the webpage's window, so in order to access front end settings
	// and communicate with React, we must inject this code into the webpage
	if ('text/html' === document.contentType) {
	injectCode(
	';(' +
	installHook.toString() +
	'(window))' +
	saveNativeValues +
	detectReact,
	);
	}

I think the fix for this is straight forward enough:

switch (document.contentType) {
  case 'text/html':
  case 'application/xhtml+xml':{
    injectCode(
      ';(' +
        installHook.toString() +
        '(window))' +
        saveNativeValues +
        detectReact,
    );
    break;
  }
}

@bvaughn to fix

[ForbiddenEra]

Wow, lots of activity on this today!

So, yes, the initial page there doesn't have any React components, there was one I used when I logged in. The site was a 'code challenge' for a job that just emailed back today saying they chose someone else, so I've taken it offline anyway.

I'll see if I can test the change. I'd be happy to put up a different test case if needed with an actual component, however, the dev tools were greyed out for me component or not - and it seems this is officially closed anyway, so I guess should be fixed.

Edit: I just noticed the change/fix is actually within react-devtools not react itself, which makes sense (I hadn't completely read every post yet) but I definitely won't easily be able to recompile the extension; is there an auto-build or something I can pick up off the current tree? Will have to take a peek.