[DevTools Bug]: hook parsing fails while using functional component + redux or alternative

[zeroxx1986]

Website or app

https://github.com/reduxjs/redux-templates/tree/master/packages/cra-template-redux-typescript

Repro steps

Before the step-by-step approach, please note, this is not specific to the cra-template-redux-typescript repo mentioned above, nor to redux itself, as it can be easily reproduced by integrating redux (or even other alternative, like zustand) to any react-based project where you use functional components together with hooks.

1. set up a bare template repo: npx create-react-app my-app --template redux-typescript
2. cd my-app
3. npm start
4. Observe the Counter component in devtools -> notice hook parsing failed.
5. go to src/features/counter/Counter.tsx and stub out the two lines which wire redux into the component (easier to stub out than to delete them and all reference in the JSX):

   // const count = useAppSelector(selectCount);  // stubbed out
   // const dispatch = useAppDispatch();          // stubbed out
   const count = 1;
   const dispatch = (x:any) => null;

6. save & reload (or let HMR do it)
7. Observe the Counter component in devtools -> notice hook parsing works properly.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[jamesbvaughan]

I just opened https://github.com/facebook/react/issues/27889 before seeing this issue. I think we're seeing the same issue. I'm going to leave mine open since I think it's a bit closer to the root cause.