ListItemComments: Hooks can only be called inside of the body of a function

Category

• Bug

Version

Please specify what version of the library you are using: 3.12.0

• SPFx: 1.16.1
• React: 17.0.2
• FluentUI: 8.105.3

Expected / Desired Behavior / Question

Control should be rendered

Observed Behavior

White SPFx extension screen. Browser console shows Error: Hooks can only be called inside of the body of a function

I don´t know what is realy causing the issue. I copied the source code of listItemComment and LivePersona controls into the project where it is used. Then I fixed a bunch of

• type issues (project is running in strict-mode)
• rules-of-hooks errors (missing dependencies in useEffect; changing objects instead of Memos)
• async/await vs promise/callback mixes

After that, the error was gone.

I forked the sp-dev-fx-controls-react dev-branch but can´t get npm ci or npm i running because of conflicting peer dependencies.
Because of that, I only copied the updated controls of the project into the fork: https://github.com/trueleader/sp-dev-fx-controls-react/commit/f2519f179bb49513eb3c97f75c0e637131345394
The project has other code-style-settings, thats why my fork commit shows many more differences.

Don´t know if this will help someone.

Start by reviewing the ListItemComments and LivePersona controls, then compare them with the updated copies in commit f2519f179bb49513eb3c97f75c0e637131345394. Reproduce the issue using React 17.0.2, FluentUI 8.105.3, and SPFx 1.16.1; done means the control renders without the hooks error.