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
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!
