aidenybai
Next.js: Do not use scan directly in a Server Component module. It should only be used in a Client Component
I get this error when trying to load react-scan on preview/prod environment on Vercel.
hook.js:608 Do not use scan directly in a Server Component module. It should only be used in a Client Component
I followed the official guide for next.js for react-scan package.
https://github.com/aidenybai/react-scan/blob/main/docs/installation/next-js-app-router.md#as-a-module-import
ReactScan.tsx
"use client";
// react-scan must be imported before react
// eslint-disable-next-line simple-import-sort/imports
import { scan } from "react-scan";
import { useEffect } from "react";
export function ReactScan() {
useEffect(() => {
scan({
enabled: true,
dangerouslyForceRunInProduction: true,
_debug: "verbose",
});
}, []);
return <></>;
}
layout.tsx
// This component must be the top-most import in this file!
// eslint-disable-next-line simple-import-sort/imports
import { ReactScan } from "@/components/general/ReactScan";
// ...all other imports
export default function RootLayout({ children }) {
return (
<html lang="en">
{/*...*/}
<ReactScan />
<body>{children}</body>
</html>
);
}
I've tried putting the ReactScan component in different places, like inside the body or head tag. But same issue.
FYI there are a couple older issues that may be relevant:
- https://github.com/aidenybai/react-scan/issues/310
- https://github.com/aidenybai/react-scan/issues/350
thanks! they haven't received any relevant answer though
@stylessh Have you tried wrapping it inside a React Suspense boundary? https://react.dev/reference/react/Suspense
There's also dynamic import in next: https://nextjs.org/docs/app/guides/lazy-loading
This error is no longer present in [email protected]
If you want to run react-scan in production you can use the following:
import {scan} from 'react-scan/all-environments'
scan() // <- works in production and dev
