react-scan React Scan widget does not appear when used using the import module method

this react scan component:

"use client";

// react-scan must be imported before react
import { scan } from "react-scan";

import * as React from "react";

export function ReactScan() {
    React.useEffect(() => {
        scan({ enabled: true });
    }, []);

    return null;
}

and this the root layout

// this component must be the top-most import in this file!
import { ReactScan } from "@/components/shared/react-scan";

import "@/styles/globals.css";

import * as React from "react";

import nextLocalFont from "next/font/local";

import Providers from "@/app/providers";

import { cn } from "@/utils/classname";

import { type Metadata } from "next";
import { type LayoutProps } from "@/types/layout";

const fontSans = nextLocalFont({
    src: [
        { path: "../fonts/InterVariable.woff2", weight: "100 900", style: "normal" },
        { path: "../fonts/InterVariable-Italic.woff2", weight: "100 900", style: "italic" },
    ],
    variable: "--font-sans",
});

export default function Layout({ children }: LayoutProps) {
    return (
        <html lang="en" dir="ltr" data-scroll-behavior="smooth" className="h-dvh scroll-smooth" suppressHydrationWarning>
            <ReactScan />
            <body className={cn([fontSans.variable, "bg-elevation-low h-full min-h-dvh font-sans antialiased"])}>
                <Providers>{children}</Providers>
            </body>
        </html>
    );
}

Screenshot:

I have followed the installation instructions and it is exactly the same. but I don't know why the widget doesn't appear, but when I use the script, it works and the widget appears.

Aug 03 '25 17:08 fahmiidris

https://github.com/aidenybai/react-scan/issues/402 I think it's the same issue

Aug 05 '25 05:08 ha1fstack

Same problem for me

Aug 26 '25 11:08 dragos-cojocaru