React DevTools "Error rendering inspected element" in AppRoute

[nofxboy1234]

Prerequisites

• [x] I have written a descriptive issue title
• [x] I have searched existing issues to ensure the bug has not already been reported

Fastify version

5.5.0

Plugin version

8.2.0

Node.js version

24.6.0

Operating system

Linux

Operating system version (i.e. 20.04, 11.3, 10)

Fedora Linux 42 (Cinnamon) x86_64

Description

I used the react-base starter from: giget gh:fastify/fastify-vite/starters/react-base#dev your-app

The issue seems to only occur when the client/pages/index.jsx component has getData or getMeta functions in it. Maybe React Dev Tools breaks because these functions are server-side, so this isn't a fastify/vite issue then?

When inspecting the AppRoute component in React Developer Tools 6.1.5, the console shows a ReactDebugToolsRenderError: Error rendering inspected component with an underlying Promise {} error. This error seems to be related to a useEffect hook and possibly the use of valtio for state management within the component. The error does not occur if the useEffect hook at line 76 of @fastify/react/virtual/core.jsx is commented out.

Console Error:

1 backendManager.js:1 Error rendering inspected element.
2 
3  ReactDebugToolsRenderError: Error rendering inspected component
4     at handleRenderFunctionError (react-debug-tools.production.js:759:24)
5     at inspectHooks (react-debug-tools.production.js:775:5)
6     at t.inspectHooksOfFiber (react-debug-tools.production.js:867:12)
7     at renderer.js:4269:17
8     at inspectElementRaw (renderer.js:4110:14)
9     at Object.inspectElement (renderer.js:4731:38)

10 at agent.js:495:18 11 at Bridge.emit (events.js:37:18) 12 at bridge.js:298:23 13 at listener (backendManager.js:1:12649)

1 backendManager.js:1 React DevTools encountered an error while trying to inspect hooks. This is most likely caused by an error in current inspected component: "AppRoute". 2 The error thrown in the component is: 3 4 Promise {}

Steps to Reproduce

1. Run the development server (npm run dev).
2. Open the application in Google Chrome (http://localhost:3000).
3. Open React DevTools.
4. Inspect the AppRoute component.
5. Observe the error in the browser's developer console.

I used gemini-2.5-pro to try find the problem. Below is what it tried, with no success: Troubleshooting Steps Taken

1. Exhaustive Dependencies: Added ctx and ctxHydration to the useEffect dependency array. This did not resolve the issue.
2. setTimeout: Wrapped the body of the useEffect in a setTimeout(..., 0) to defer execution. This did not resolve the issue.
3. Memoize valtio Proxy: Used useState to memoize the valtio proxy object created for the RouteContext.Provider. This did not resolve the issue.

Ignore the override in package.json. There was a deprecation warning that I wanted to rule out from my testing of the issue.

Link to code that reproduces the bug

https://github.com/nofxboy1234/your-app

Expected Behavior

The AppRoute component should be inspectable in React DevTools without throwing an error.