fix fragment issue (#217)

Author: AlemTuzlak

package.json

@@ -2,7 +2,7 @@
 	"name": "react-router-devtools",
 	"description": "Devtools for React Router - debug, trace, find hydration errors, catch bugs and inspect server/client data with react-router-devtools",
 	"author": "Alem Tuzlak",
-	"version": "5.1.0",
+	"version": "5.1.1",
 	"license": "MIT",
 	"keywords": [
 		"react-router",

src/client/layout/Tabs.tsx

@@ -90,7 +90,7 @@ const Tabs = ({ plugins, setIsOpen }: TabsProps) => {
 	}
 
 	const getErrorCount = () => {
-		return htmlErrors.length + (window.HYDRATION_OVERLAY.ERROR ? 1 : 0)
+		return htmlErrors.length + (window.HYDRATION_OVERLAY?.ERROR ? 1 : 0)
 	}
 
 	const hasErrors = getErrorCount() > 0

src/vite/utils/inject-source.test.ts

@@ -6,6 +6,64 @@ const removeEmptySpace = (str: string) => {
 }
 
 describe("inject source", () => {
+	it("shouldn't augment react fragments", () => {
+		const output = removeEmptySpace(
+			addSourceToJsx(
+				`
+      export const Route = createFileRoute("/test")({
+      component: function() { return <>Hello World</> },
+      })
+        `,
+				"test.jsx"
+			).code
+		)
+		expect(output).toBe(
+			removeEmptySpace(`
+            export const Route = createFileRoute("/test")({
+      component: function() { return <>Hello World</> },
+      })
+        `)
+		)
+	})
+
+	it("shouldn't augment react fragments if they start with Fragment ", () => {
+		const output = removeEmptySpace(
+			addSourceToJsx(
+				`
+      export const Route = createFileRoute("/test")({
+      component: function() { return <Fragment>Hello World</Fragment> },
+      })
+        `,
+				"test.jsx"
+			).code
+		)
+		expect(output).toBe(
+			removeEmptySpace(`
+            export const Route = createFileRoute("/test")({
+      component: function() { return <Fragment>Hello World</Fragment> },
+      })
+        `)
+		)
+	})
+	it("shouldn't augment react fragments if they start with React.Fragment ", () => {
+		const output = removeEmptySpace(
+			addSourceToJsx(
+				`
+      export const Route = createFileRoute("/test")({
+      component: function() { return <React.Fragment>Hello World</React.Fragment> },
+      })
+        `,
+				"test.jsx"
+			).code
+		)
+		expect(output).toBe(
+			removeEmptySpace(`
+            export const Route = createFileRoute("/test")({
+      component: function() { return <React.Fragment>Hello World</React.Fragment> },
+      })
+        `)
+		)
+	})
 	describe("FunctionExpression", () => {
 		it("should work with deeply nested custom JSX syntax", () => {
 			const output = removeEmptySpace(

src/vite/utils/inject-source.ts

@@ -82,12 +82,27 @@ const getPropsNameFromFunctionDeclaration = (
 	return propsName
 }
 
+const getNameOfElement = (element: t.JSXIdentifier | t.JSXMemberExpression | t.JSXNamespacedName): string => {
+	if (element.type === "JSXIdentifier") {
+		return element.name
+	}
+	if (element.type === "JSXMemberExpression") {
+		return `${getNameOfElement(element.object)}.${getNameOfElement(element.property)}`
+	}
+
+	return `${element.namespace.name}:${element.name.name}`
+}
+
 const transformJSX = (element: NodePath<t.JSXOpeningElement>, propsName: string | null, file: string) => {
 	const loc = element.node.loc
 	if (!loc) return
 	const line = loc.start.line
 	const column = loc.start.column
+	const nameOfElement = getNameOfElement(element.node.name)
 
+	if (nameOfElement === "Fragment" || nameOfElement === "React.Fragment") {
+		return
+	}
 	const hasDataSource = element.node.attributes.some(
 		(attr) =>
 			attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier" && attr.name.name === "data-rrdt-source"