Install React Scan in your Rsbuild project using either the configuration file or a script tag.
Configuration Method
Open your Rsbuild config
Navigate to rsbuild.config.ts (or rsbuild.config.js).
Add the script via html.tags
Use Rsbuild’s html.tags configuration:export default {
html: {
tags: [
{
tag: "script",
attrs: {
src: "https://cdn.jsdelivr.net/npm/react-scan/dist/auto.global.js",
crossOrigin: "anonymous",
},
append: false,
},
],
},
};
Setting append: false ensures the script loads before other scripts.
Script Tag Method (Custom Template)
If you’re using a custom HTML template:
Open your HTML template
Navigate to your custom HTML template file.
Add the script tag
Add the React Scan script in the <head> section:<!DOCTYPE html>
<html lang="en">
<head>
<script
crossOrigin="anonymous"
src="//cdn.jsdelivr.net/npm/react-scan/dist/auto.global.js"
></script>
<!-- rest of your scripts go under -->
</head>
<body>
<div id="root"></div>
</body>
</html>
Module Import Method
Install the package
npm install -D react-scan
Add to your entry point
Import React Scan in your entry file (e.g., src/index.tsx or src/main.tsx):// must be imported before React and React DOM
import { scan } from "react-scan";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
scan({
enabled: true,
});
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
React Scan must be imported before React and React DOM in your entire project, as it needs to hijack React DevTools before React gets to access it.
Running in Production
By default, React Scan only runs in development. To enable it in production:
- import { scan } from "react-scan";
+ import { scan } from "react-scan/all-environments";
Running React Scan in production is not recommended as it may impact performance.