React scan not working in Firefox (NPM and CDN)

[las-nish]

Hi,

I'm encountering an issue where react-scan does not work in Firefox, although it functions correctly in all other major browsers (e.g., Chrome, Edge).

Details:

• I’ve tested using both the NPM package and the CDN URL.
• In Firefox:
  • The script appears to load correctly (verified via the browser’s inspector).
  • However, nothing happens no logs, errors, or messages appear in the console.
  • The expected behavior from react-scan does not occur.
• In other browsers:
  • Everything works as expected.
  • Console output appears, and react-scan performs correctly.
• The project is private, so I can't share the code.

https://react-scan.com/ I see that react scan is working on this page in Firefox.

Steps to Reproduce:

1. Load a basic NextJS page using react-scan (via NPM or CDN).
2. Open the page in Firefox.
3. Observe the lack of behavior or logs.
4. Test the same page in Chrome/Edge, functionality is normal.

Environment:

• Firefox Version: 140.0.4 (aarch64) (with only React Developer Tools extension)
• react-scan Version: 0.4.3 (NPM), In CDN Latest
• OS: Mac OS 15.3

Example Codes:

Loading via CDN:

import Script from 'next/script';

const ReactScan = () => (
  <Script src='https://cdn.jsdelivr.net/npm/react-scan/dist/auto.global.js' />
);

export default ReactScan;

Loading via NPM Package:

"react": "^19.1.0",
"react-dom": "^19.1.0",
"next": "^15.3.3",
"react-scan": "^0.4.3"

'use client';

import { JSX, useEffect } from 'react';
import { scan } from 'react-scan';

const ReactScan = (): JSX.Element => {
  useEffect(() => {
    scan({
      enabled: true,
      showToolbar: true,
      animationSpeed: 'off',
      showFPS: true,
      showNotificationCount: true,
      allowInIframe: true,
    });
  }, []);

  return <></>;
};

export default ReactScan;

[las-nish]

Found the issue:

I changed the browser to Edge. The problem occurred again. The first time, react scan worked perfectly. But after installing react developer tools, react scan stopped working. Then I removed that extension from the browser. Now react scan works fine.

[sss-Mihail-sss]

I had the same problem in firefox. Changed import to react-scan/all-environments and everything worked

[las-nish]

I'll try that method

[rookbreezy]

This is a really frustrating issue and yes seems it was React Developer Tools for me too. Issue name should probably be updated, I'm not using Firefox.

The solution is as @sss-Mihail-sss says, install the npm package https://www.npmjs.com/package/react-scan then import from react-scan/all-environments

Here is a tailwind example using a small toggle button to enable it:

import { useEffect, useState } from 'react'
import { scan } from 'react-scan/all-environments'

export function ReactScan() {
  const [isEnabled, setIsEnabled] = useState(false)

  useEffect(() => {
    if (process.env.NODE_ENV !== 'development') return

    if (!isEnabled) {
      scan({
        enabled: false,
        showToolbar: false,
      })
      return
    }

    scan({
      enabled: true,
      showToolbar: true,
      animationSpeed: 'off',
      showFPS: true,
      showNotificationCount: true,
      allowInIframe: true,
    })
  }, [isEnabled])

  if (process.env.NODE_ENV !== 'development') return null

  return (
    <button
      onClick={() => setIsEnabled((prev) => !prev)}
      className='group fixed right-0 bottom-0 z-9999 flex size-8 items-center justify-center'
    >
      <div
        className={
          'size-2.5 rounded-full border-[1.5px] border-current bg-current/30 ' +
          (isEnabled
            ? 'text-violet-500 group-hover:opacity-50'
            : 'opacity-25 group-hover:opacity-100')
        }
      />
    </button>
  )
}