intellisense imports components from "bootstrap" instead of "react-bootstrap"

Question

Hi I am not sure if this is about my VScode settings or the way I installed bootstrap. I used yarn to install react-bootstrap and bootstrap as show in react-bootstrap's documentation. But when I type <Button and press enter it automatically imports <Button component like this:

import { Button } from "bootstrap";

this doesn't work. I have to manually fix it to

import { Button } from "react-bootstrap";

is it a bug or did I do something with wrong order?

Answer 1

If you have inline suggestions turned on (Preferences -> Text Editor -> Suggestions), you'll see that Intellisense provides import suggestions alphabetically — first by identifier then by package.

With inline suggestions, you're given a list you can navigate through to select whichever option you're looking for. In this case, you'd type But and it would show the react-bootstrap Button as the second option, so you'd press down arrow and tab to accept that option.