aidenybai
React Scan ran into a problem Cannot read properties of undefined (reading '__H')
Title: React Scan ran into a problem Cannot read properties of undefined (reading '__H')
Body:
I'm following the docs exactly using the <ReactScan> component method with Next.js App Router.
Steps:
- Created the client component:
"use client";
import { scan } from "react-scan";
import { useEffect } from "react";
export function ReactScan() {
useEffect(() => {
scan({ enabled: true });
}, []);
return null;
}
- Imported it at the top of
app/layout.tsx:
import { ReactScan } from "./ReactScan"; // top-most import
export default function RootLayout({ children }) {
return (
<html lang="en">
<ReactScan />
<body>{children}</body>
</html>
);
}
But I still get this error at runtime:
Cannot read properties of undefined (reading '__H')
**Env:**
* Next.js 15.3.1 (App Router)
* React 18.3.1
* react-scan 0.3.3
* Node 18
Any idea what's wrong?
hm that normally means we are somehow trying to run a react hook inside preact (the ui lib we use for the UI). Is this reproduced with just the details given here?
In the meantime, you can try running scan() inside a client component file. I haven't had any problems doing that, for example
// page.tsx "use client" import { scan } from "react-scan"; scan()
export default function Page(){...}
Same here using Astro
---
/* components */
import AppDashboardLayout from "@/layouts/react/DashboardLayout";
/* styles */
import "@/assets/styles/global.css";
export const prerender = false;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>Astro Basics</title>
<script>
import { scan } from "react-scan";
scan({ enabled: true });
</script>
</head>
<body>
<AppDashboardLayout client:only="react">
<p>Some content</p>
</AppDashboardLayout>
</body>
</html>
@RobPruzan Hey, yes i know the cause for this error, but i have no idea how to fix it. Also, it has been rendered in the client side(you can see in the description).
Plus, I have tried to render it in the single client side page but the issue still exists.
Still broken when using Next.js app router instructions.
- next:
15.5.6 - react-scan:
0.4.3 - node:
22.17.1
Script-tag solution works fine.
