React Scan widget does not appear when used using the import module method #401
Description
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.