You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Just copied the example from documentation but still get the following error:
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.
Nodejs: 18.18.0 Create new React project with Nextjs:
npx create-next-app@latest
Install react bootstrap:
npm install react-bootstrap bootstrap
Then, in the page.tsx file, paste the following:
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
export default function Home() {
return (
<Navbar expand="lg" className="bg-body-tertiary">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
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.
Check your code at page.tsx:11.
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.
Check your code at page.tsx:12.
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.
Check your code at page.tsx:15.
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.
Check your code at page.tsx:16.
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.
Check your code at page.tsx:18.
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.
Check your code at page.tsx:19.
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.
Check your code at page.tsx:22.
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.
Check your code at page.tsx:23.
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.
Check your code at page.tsx:24.
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.
Check your code at page.tsx:13.
⨯ 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>)
⨯ Error: Unsupported Server Component type: undefined
at stringify (<anonymous>)
digest: "966019666"
Note that other components like Button, Badge, etc. workes just fine.
Expected behavior
Navbar should work normally without any error.
To Reproduce
No response
Reproducible Example
no
Screenshots
No response
What operating system(s) are you seeing the problem on?
No response
What browser(s) are you seeing the problem on?
No response
What version of React-Bootstrap are you using?
2.9.0
What version of Bootstrap are you using?
5.3.2
Additional context
No response
The text was updated successfully, but these errors were encountered:
daxnet
changed the title
xpected a string (for built-in components) or a class/function (for composite components) but got: undefined on Navbar
expected a string (for built-in components) or a class/function (for composite components) but got: undefined on Navbar
Oct 5, 2023
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
Prerequisites
Describe the bug
Just copied the example from documentation but still get the following error:
Nodejs: 18.18.0
Create new React project with Nextjs:
Install react bootstrap:
Then, in the
page.tsx
file, paste the following:Run the app:
Then navigate to http://localhost:3000
Error:
Note that other components like Button, Badge, etc. workes just fine.
Expected behavior
Navbar should work normally without any error.
To Reproduce
No response
Reproducible Example
no
Screenshots
No response
What operating system(s) are you seeing the problem on?
No response
What browser(s) are you seeing the problem on?
No response
What version of React-Bootstrap are you using?
2.9.0
What version of Bootstrap are you using?
5.3.2
Additional context
No response
The text was updated successfully, but these errors were encountered: