[DevTools Bug]: App not recognized in Firefox, but works in Chrome

[Azeirah]

Website or app

Repro steps

On both Firefox 103 and 104 the react devtools extension says: "This page doesn't appear to be using React".

On the most recent version of Chrome it's working just fine.

I cannot share the project since it's a private project unfortunately, but I suspect this is a regression introduced with the recent #26765

Especially since the devtools were working perfectly fine until maybe one or two weeks ago.

It does work in incognito mode in Firefox.

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

[github-actions]

@Azeirah: We're sorry you've seen this error. ❤️

It looks like you forgot to specify a valid URL. (This means that we will not be able to reproduce the problem you're reporting.)

Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

Issues without repros are automatically closed but we will re-open if you update with repro info.

[hoxyq]

Hey @Azeirah, thanks for reporting this.

Can you please specify the version of the extension you are using in Firefox?

[Azeirah]

It's version 4.27.8

[hoxyq]

It's version 4.27.8

I cannot reproduce it with Firefox both v113.0.2 and v104.0, so its probably something wrong on your end. If you can share more about your setup, I can try to help you with fixing that.

[Azeirah]

I'm running a React webapp served by apache2.

Without sharing sensitive code, this is how the app is initialized

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  // <React.StrictMode>
  <Provider store={store}>
    <LiveInterface />
    <App
      themeMode={"light"}
      theme={{
        typography: { fontSize: 32 },
      }}
    >
      <SessionState />
      <ErrorBoundary>
        <Restart />
        <Router />
      </ErrorBoundary>
    </App>
  </Provider>
  // </React.StrictMode>
);

Package.json

    ...
    "react": "^18.2.0",
    ...

I followed the troubleshooting steps

• I'm not on a file:// url, I'm using a local http server.
• The web application is running React
• I'm not on Codepen
• The app is not in an iFrame, not in a Chrome extension, is not a react native application and is not otherwise unusual (it's just a webapp)
• I'm not on Chrome v101 or earlier (I'm on Firefox)

I find it odd that the global __REACT_DEVTOOLS_GLOBAL_HOOK__ is also not being set. If I understand it correctly it should even get set on sites that don't use react, right? Because it's how react initializes communication and communicates with the devtools. If I go to stackoverflow.com for example, the global is set. After removing various plugins, the devtools do inject the global. The devtools still don't recognize the application however.

Another odd thing I noticed is that one page of the same application does work (different react application on the same http server).

So

http://mydevserver.test/app/APP_ID // doesn't work
http://mydevserver.test/admin // react-based backoffice, does work. Uses react ^17.0.2

I followed the trace in the firefox debugger:

It looks like hook.checkDCE is false? I am using create react app with hot reloading, the backoffice/admin page does not use hot reloading. Could that be the issue?

---

I would like to note again that it does work in incognito mode. This is on a different computer, same setup and same app.

[hoxyq]

I'm running a React webapp served by apache2.

Without sharing sensitive code, this is how the app is initialized

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  // <React.StrictMode>
  <Provider store={store}>
    <LiveInterface />
    <App
      themeMode={"light"}
      theme={{
        typography: { fontSize: 32 },
      }}
    >
      <SessionState />
      <ErrorBoundary>
        <Restart />
        <Router />
      </ErrorBoundary>
    </App>
  </Provider>
  // </React.StrictMode>
);

Package.json

    ...
    "react": "^18.2.0",
    ...

I followed the troubleshooting steps

• I'm not on a file:// url, I'm using a local http server.
• The web application is running React
• I'm not on Codepen
• The app is not in an iFrame, not in a Chrome extension, is not a react native application and is not otherwise unusual (it's just a webapp)
• I'm not on Chrome v101 or earlier (I'm on Firefox)

I find it odd that the global __REACT_DEVTOOLS_GLOBAL_HOOK__ is also not being set. If I understand it correctly it should even get set on sites that don't use react, right? Because it's how react initializes communication and communicates with the devtools. If I go to stackoverflow.com for example, the global is set. After removing various plugins, the devtools do inject the global. The devtools still don't recognize the application however.

Another odd thing I noticed is that one page of the same application does work (different react application on the same http server).

So

http://mydevserver.test/app/APP_ID // doesn't work
http://mydevserver.test/admin // react-based backoffice, does work. Uses react ^17.0.2

I followed the trace in the firefox debugger:

It looks like hook.checkDCE is false? I am using create react app with hot reloading, the backoffice/admin page does not use hot reloading. Could that be the issue?

I would like to note again that it does work in incognito mode. This is on a different computer, same setup and same app.

Do I understand correctly that it works for you in Firefox's incognito mode? This is strange, because we don't support it yet.

[Azeirah]

Do I understand correctly that it works for you in Firefox's incognito mode? This is strange, because we don't support it yet.

I thought so, but it's not the case. The plugin gives the notification that it can find react on the page, but the actual devtools don't load.

This is in Firefox incognito mode.

---

I'm also noticing that the devtools not loading seems almost random, on some page reloads they do load and on others they don't.

This gives me the feeling that there might be a race condition due to script loading order? If the plugin loads before React on the page, it works, if not, it won't.

[hoxyq]

Do I understand correctly that it works for you in Firefox's incognito mode? This is strange, because we don't support it yet.

I thought so, but it's not the case. The plugin gives the notification that it can find react on the page, but the actual devtools don't load.

This is in Firefox incognito mode.

I'm also noticing that the devtools not loading seems almost random, on some page reloads they do load and on others they don't.

This gives me the feeling that there might be a race condition due to script loading order? If the plugin loads before React on the page, it works, if not, it won't.

Too many factors that might influence it, this will be hard to debug without reproducible sample.
Can you try to run this application (which doesn't work with DevTools) locally (not on apache) and check if it works?

If problem is still present, I think you can create a repro from this point.

We still have different script injection logic for Firefox and not yet migrated to manifests v3 for Firefox, so this might be the reason why it works on Chrome and not on Firefox.