fix(devtools-vite): preserve valid syntax when removing devtools JSX (#480)

* fix(devtools-vite): preserve valid syntax when removing devtools JSX

* add changeset

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: vedant416

.changeset/happy-clubs-wave.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-bundler-core': patch
+---
+
+Fix devtools JSX removal logic.

packages/devtools-bundler-core/src/remove-devtools.test.ts

@@ -601,6 +601,94 @@ export function DevtoolsProvider() {
     null
   )
 }
+`),
+    )
+  })
+
+  test('replaces removed devtools expressions with null', () => {
+    const output = removeEmptySpace(
+      removeDevtools(
+        `
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+function functionCall(value: unknown) {
+  return value
+}
+
+export function DevtoolsProvider() {
+  const devtools1 = <TanStackDevtools />
+  const devtools2 = functionCall(<TanStackDevtools />)
+  const devtools3 = true ? <TanStackDevtools /> : <>fallback</>
+  const devtools4 = {
+    devtools: <TanStackDevtools />
+  }
+  const devtools5 = (<div>
+      {<TanStackDevtools plugins={[]} />}
+  </div>)
+  return { devtools1, devtools2, devtools3, devtools4, devtools5 }
+}
+`,
+        'test.tsx',
+      )!.code,
+    )
+
+    expect(output).toBe(
+      removeEmptySpace(`
+function functionCall(value: unknown) {
+  return value
+}
+
+export function DevtoolsProvider() {
+  const devtools1 = null
+  const devtools2 = functionCall(null)
+  const devtools3 = true ? null : <>fallback</>
+  const devtools4 = {
+    devtools: null
+  }
+  const devtools5 = (<div>
+      {null}
+  </div>)
+  return { devtools1, devtools2, devtools3, devtools4, devtools5 }
+}
+`),
+    )
+  })
+
+  test('removes devtools jsx children entirely', () => {
+    const output = removeEmptySpace(
+      removeDevtools(
+        `
+import { TanStackDevtools } from '@tanstack/react-devtools'
+
+export function DevtoolsProvider() {
+  return (
+    <>
+      <div>
+        <div>before</div>
+        <TanStackDevtools />
+        <div>after</div>
+      </div>
+      <TanStackDevtools />
+    </>
+  )
+}
+`,
+        'test.tsx',
+      )!.code,
+    )
+
+    expect(output).toBe(
+      removeEmptySpace(`
+export function DevtoolsProvider() {
+  return (
+  <>
+    <div>
+      <div>before</div>
+      <div>after</div>
+    </div>
+  </>
+  )
+}
 `),
     )
   })

packages/devtools-bundler-core/src/remove-devtools.ts

@@ -130,10 +130,17 @@ export function removeDevtools(code: string, id: string) {
 
       let end = node.end
       if (code[end] === '\n') end++
-      if (parentNode?.type === 'ParenthesizedExpression') {
-        s.overwrite(node.start, end, 'null')
-      } else {
+      /**
+       * Devtools nodes can be removed safely when nested in JSX.
+       * In all other contexts, replace them with `null` to avoid leaving invalid syntax.
+       */
+      if (
+        parentNode?.type === 'JSXElement' ||
+        parentNode?.type === 'JSXFragment'
+      ) {
         s.remove(node.start, end)
+      } else {
+        s.overwrite(node.start, end, 'null')
       }
     })