type is invalid (react-bootstrap Form)

59 Views Asked by At

Attempting to build a form using exact sample code from react-bootstrap documentation: https://react-bootstrap.github.io/docs/forms/form-control

import Form from 'react-bootstrap/Form';

export default function Home() {
  return (
    <Form>
      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
        <Form.Control type="email" placeholder="[email protected]" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
        <Form.Control as="textarea" rows={3} />
      </Form.Group>
    </Form>
  );
}

and getting compile warning and error from react and next respectively:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)

Via elimination, I can tell <Form.Group> is the offending element. The type is resolved by intellisense

enter image description here

From package.json:

"dependencies": {
  "bootstrap": "^5.3.2",
  "next": "14.0.4",
  "react": "^18",
  "react-bootstrap": "^2.10.0",
  "react-dom": "^18"
},
"devDependencies": {
  "@types/node": "^20",
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "autoprefixer": "^10.0.1",
  "eslint": "^8",
  "eslint-config-next": "14.0.4",
  "postcss": "^8",
  "tailwindcss": "^3.3.0",
  "typescript": "^5"
}

operating environment is WSL2-Ubuntu on Windows 10

The code and imports are direct copy from react-bootstrap documentation. Any help appreciated!

0

There are 0 best solutions below