diff --git a/package-lock.json b/package-lock.json
index 1795ca4a..f052c156 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
 				"@radix-ui/react-accordion": "^1.2.2",
 				"@radix-ui/react-select": "^2.1.5",
 				"beautify": "^0.0.8",
-				"bippy": "^0.2.24",
+				"bippy": "^0.3.0",
 				"chalk": "^5.4.1",
 				"clsx": "^2.1.1",
 				"date-fns": "^4.1.0",
@@ -3697,9 +3697,9 @@
 			}
 		},
 		"node_modules/bippy": {
-			"version": "0.2.24",
-			"resolved": "https://registry.npmjs.org/bippy/-/bippy-0.2.24.tgz",
-			"integrity": "sha512-EZ8GSYSyPywsUmcOH2Kss/yhI8Auoku1WGKOK3/Ya7vukriRPJ2/8q+KApvh8LtX4KXNDBE5QD6furYz2Yei+Q==",
+			"version": "0.3.0",
+			"resolved": "https://registry.npmjs.org/bippy/-/bippy-0.3.0.tgz",
+			"integrity": "sha512-yZ58v6kaE5m8gK0erDfHE9XB6PFxbKB/o6XmI37L560iM1faZTAAQ5by6qxbMei9SIjDhsDGsqrgpmChSPxcfA==",
 			"dependencies": {
 				"@types/react-reconciler": "^0.28.9"
 			},
diff --git a/package.json b/package.json
index 6d32fb06..f0288a9d 100644
--- a/package.json
+++ b/package.json
@@ -150,7 +150,7 @@
 		"@radix-ui/react-accordion": "^1.2.2",
 		"@radix-ui/react-select": "^2.1.5",
 		"beautify": "^0.0.8",
-		"bippy": "^0.2.24",
+		"bippy": "^0.3.0",
 		"chalk": "^5.4.1",
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
diff --git a/src/client/hooks/useReactTreeListeners.ts b/src/client/hooks/useReactTreeListeners.ts
index d21468cb..e84786c8 100644
--- a/src/client/hooks/useReactTreeListeners.ts
+++ b/src/client/hooks/useReactTreeListeners.ts
@@ -1,9 +1,9 @@
 import { type Fiber, onCommitFiberRoot, traverseFiber } from "bippy"
+import { getFiberSource } from "bippy/source"
 import { useCallback, useEffect, useRef } from "react"
 import { useNavigation } from "react-router"
 import type { HTMLError } from "../context/rdtReducer.js"
 import { useHtmlErrors } from "../context/useRDTContext.js"
-
 export const ROUTE_CLASS = "outlet-route"
 
 const isSourceElement = (fiberNode: any) => {
@@ -153,7 +153,7 @@ export function useReactTreeListeners() {
 	useEffect(() => {
 		if (navigation.state !== "idle") return
 
-		onCommitFiberRoot((root) =>
+		onCommitFiberRoot((root) => {
 			traverseFiber(root.current, (fiberNode) => {
 				if (isSourceElement(fiberNode) && typeof import.meta.hot !== "undefined") {
 					const originalSource = fiberNode?._debugSource
@@ -166,6 +166,17 @@ export function useReactTreeListeners() {
 						`${fileName}:::${line}` //
 					)
 				}
+				getFiberSource(fiberNode)
+					.then((source) => {
+						const line = source?.lineNumber
+						const fileName = source?.fileName
+
+						fiberNode.stateNode?.setAttribute?.(
+							"data-source",
+							`${fileName}:::${line}` //
+						)
+					})
+					.catch(console.error)
 
 				if (fiberNode?.stateNode && fiberNode?.elementType === "form") {
 					findIncorrectHtml(fiberNode.child, fiberNode, "form")
@@ -183,7 +194,7 @@ export function useReactTreeListeners() {
 					styleNearestElement(fiberNode)
 				}
 			})
-		)
+		})
 
 		setHtmlErrors(invalidHtmlCollection.current)
 		invalidHtmlCollection.current = []
diff --git a/src/vite/plugin.tsx b/src/vite/plugin.tsx
index 5f542c1c..770e26f0 100644
--- a/src/vite/plugin.tsx
+++ b/src/vite/plugin.tsx
@@ -76,6 +76,22 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 	return [
 		{
 			name: "react-router-devtools",
+			config(config) {
+				config.optimizeDeps = {
+					...config.optimizeDeps,
+					include: [
+						...(config.optimizeDeps?.include ?? []),
+						"react-router-devtools > beautify",
+						"react-router-devtools > react-diff-viewer-continued",
+						"react-router-devtools > react-d3-tree",
+						"react-router-devtools > classnames",
+						"react-router-devtools > @bkrem/react-transition-group",
+						"react-router-devtools/client",
+						"react-router-devtools/context",
+						"react-router-devtools/server",
+					],
+				}
+			},
 			apply(config) {
 				return shouldInject(config.mode, includeClient)
 			},