Visual Studio React template project doesn't work with hook based components - Error: Invalid hook call

[xuhaohems]

I am using the React web application template in Visual Studio 2022 to create a web project. Right after project is created, I installed a component that’s implemented with hooks, e.g. React-Bootstrap by package management command -
npm install react-bootstrap [email protected]

Then I import it to home.js -

import Button from ‘react-bootstrap/Button’;
and add an element -

Button #1 Button #2 Button #3

Run the project and I get the following error -

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.

I haven’t added any other code and I think there is something wrong with the code in the template but I can’t figure out the issue.

[Pilchie]

Hi - this doesn't seem to be an ASP.NET Core question, but rather something about react. Unfortunately, that's outside the scope of our team.

Can you say exactly which template title you created?

[ghost]

Hi @xuhaohems. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[xuhaohems]

This is about the ASP.Net Core with React.js template (C#)
The template generated can't work with any hook based component. You can follow the step to repro the issue.

[Pilchie]

Thanks for confirming. Unfortunately, our team are not react developers, and can't really help debug issues with the react part of the template. We mostly just take the output of a new react project and add it to the template.

[javiercn]

Our templates are a starting point and you can choose to modify them to use new features as needed. In this case, hooks seem to be incompatible with the default style of the templates (which is class based components). You can feel free to change the code to use function components and leverage hooks, but that is not something we plan to do.