I am trying to play around with react-bootstrap with NextJS but immediately encountered error using Form.Group when trying to create a simple login page. I copied the below code from the official react-bootstrap page. I am not sure what I am doing wrong or am I missing something?

import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";

export default function SignIn() {
    return (
        <Form>
            <Form.Group className="mb-3" controlId="formBasicEmail"></Form.Group>
            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
    );
}

and got this error when running 'npm run dev'

Unhandled Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely fot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `FormGroup`.

package versions

"@types/react-bootstrap": "^0.32.37",
"bootstrap": "^5.3.3",
"next": "15.2.3",
"react": "^19.0.0",
"react-bootstrap": "^2.10.9",
"react-dom": "^19.0.0"

I am trying to play around with react-bootstrap with NextJS but immediately encountered error using Form.Group when trying to create a simple login page. I copied the below code from the official react-bootstrap page. I am not sure what I am doing wrong or am I missing something?

import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";

export default function SignIn() {
    return (
        <Form>
            <Form.Group className="mb-3" controlId="formBasicEmail"></Form.Group>
            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
    );
}

and got this error when running 'npm run dev'

Unhandled Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely fot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `FormGroup`.

package versions

"@types/react-bootstrap": "^0.32.37",
"bootstrap": "^5.3.3",
"next": "15.2.3",
"react": "^19.0.0",
"react-bootstrap": "^2.10.9",
"react-dom": "^19.0.0"

• next.js
• react-bootstrap

Share Improve this question Follow asked Mar 24 at 12:09 nopleesnoplees 311 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

From what I can see, it looks like Form.Group is not supported anymore in Bootstrap V5. If you check the forms section and compare V4 and V5, you can see V4 still makes use of Form Group but in V5 Form Group is gone, they just directly use Form Label and Form text under the tag

Try not using Form.Group and directly use Form.Label and Form.Control inside your Form tag