Getting error when using other React UI Frameworks

[racksen]

Thanks for creating and sharing such a great work. Facing following problem and pls guide me on how to resolve it.

Problem:
Tried to create custom components out of @fluentui/react but getting following error in browser when consuming it in Tests. There is no error during the build times.
Verified the #1 and #2 issues mentioned in the "Error Details" using this reference and there is no version mismatch and duplicate copy.

Error Details:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   at resolveDispatcher (index.js:21425:21)
   at Object.useEffect13 (index.js:21460:28)
   at useFocusRects (index.js:44497:10)
   at FocusRects (index.js:44524:3)
   at renderWithHooks (index.js:12708:26)
   at mountIndeterminateComponent (index.js:14828:21)
   at beginWork (index.js:15615:22)
   at HTMLUnknownElement.callCallback2 (index.js:5318:22)
   at Object.invokeGuardedCallbackDev (index.js:5343:24)
   at invokeGuardedCallback (index.js:5377:39)

[ArtiomTr]

Hello @racksen,

Could you please tell me more about your 'tests' structure? Are you running the jest tests? Or it is another project, having separate package.json file?

Most times when I saw this error, the issue was that project contained 2 different react versions. To verify this, you can run:

npm ls react

In the directory, containing package.json file. If everything is ok, the only one react entry will be without (deduped) mark. If something is wrong, there will be multiple versions of react.