Skip to content

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

Closed
@xuhaohems

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    ✔️ Resolution: AnsweredResolved because the question asked by the original author has been answered.Status: Resolvedarea-mvcIncludes: MVC, Actions and Controllers, Localization, CORS, most templatesfeature-spaquestion

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions