I am starting to use React/Next.js and I have got the error:
TypeError: Cannot read properties of undefined (reading 'Item')
When trying to execute the following code in a Next.js application.
The error is due to the header code that is in components->Menu.js file.
I added the menu code after creating the application with npx create-next-app and installing reactstrap
import MyApp from 'next';
import { Nav, Navbar, NavDropdown } from 'reactstrap'
const Menu = () => {
return (
<div>
<Navbar bg="" expand="lg">
<Navbar.Brand href="/">
<h1>Logo</h1>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link title="Página Inicial" href="/">Home</Nav.Link>
<Nav.Link title="Quem Somos" href="/about">About Us</Nav.Link>
<Nav.Link title="Fale conosco" href="/contact">Contact</Nav.Link>
<NavDropdown title="Social" id="basic-nav-dropdown">
<NavDropdown.Item href="https://protonmail.com/" title="Proton" target="_blank">Proton</NavDropdown.Item>
<NavDropdown.Item href="https://www.deepl.com/translator" title="Deepl" target="_blank">Deepl</NavDropdown.Item>
<NavDropdown.Item href="http://duckduckgo.com/" title="DuckDuckGo" target="_blank">DuckDuckGo</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
export default Menu
If I take the NavDropdown out, I get the following 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 forgot to export your component from the file
it's defined in, or you might have mixed up default and named imports.
(The code without NavDropdown is bellow)
<Navbar bg="" expand="lg">
<Navbar.Brand href="/">
<h1>Logo</h1>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link title="Página Inicial" href="/">Home</Nav.Link>
<Nav.Link title="Quem Somos" href="/about">About Us</Nav.Link>
<Nav.Link title="Fale conosco" href="/contact">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
I am calling the Menu component in the code bellow:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'reactstrap';
import { Nav, Navbar, NavDropdown } from 'reactstrap'
import Menu from '../components/Menu'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Menu></Menu>
<div className={styles.first}></div>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Next.js!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
I got the Menu code from this code: https://github.com/webdeveloperbrasil/next-aula-002
**If I remove the Menu from the code, it works fine.
Related
here it the code that I'm busy with
Any help would be appreciated.
I know this isn't such a complicated issue but
I just Don't know how to fix this
If someone could at least just tell me where to fix it
Or just tell me what the actual problem is.
import Image from 'next/image'
import { Inter } from '#next/font/google'
import 'bulma/css/bulma.css'
import styles from './page.module.css'
import { Head } from 'next/document'
const inter = Inter({ subsets: ['latin'] })
export default function VendingMachine() {
return (
<><div>
<Head>
<title>VendingMachine App</title>
<meta name="description" content="A blockchain vending app" />
</Head>
<Navbar className="navbar">
<div className='container'>
<div className="navbar-brand">
<h1>Vending Machine</h1>
</div>
</div>
</Navbar>
</div>
<main className={styles.main}>
<div className={styles.description}>
<p>
Get started by editing
<code className={styles.code}>src/app/page.tsx</code>
</p>
<div>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className={styles.vercelLogo}
width={100}
height={24}
priority />
</a>
</div>
</div>
<div className={styles.center}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority />
<div className={styles.thirteen}>
<Image src="/thirteen.svg" alt="13" width={40} height={31} priority />
</div>
</div>
<div className={styles.grid}>
I've tried multiple things
I'm using #tanstack/react-location in React Typescript project + 'react-redux'.
When I change redux auth state (login, logout) I also make my MainNavigation changing. Some Links are added or removed. And when it happens the router stops working.
Updated Links are working, url is changing, but Router isn't responding.
After refresh Router works again.
App.tsx
...
<Router
location={reactLocation}
routes={appRoutes}
defaultPendingElement={<Spinner />}
defaultPendingMs={10}
>
<MainNavigation />
<Outlet />
</Router>
MainNavigation.tsx
<header className="header">
<Link to="/" getActiveProps={getActiveProps}>
<div className="logo">RS Lang</div>
</Link>
<nav>
<ul>
<li>
<Link to="/" getActiveProps={getActiveProps}>
Home
</Link>
</li>
<li>
<Link to="/team" getActiveProps={getActiveProps}>
Team{' '}
</Link>
</li>
<li>
<Link to="/textbook" getActiveProps={getActiveProps}>
Textbook
</Link>
</li>
{isLoggedIn && (
<li>
<Link to="/dictionary" getActiveProps={getActiveProps}>
Dictionary
</Link>
</li>
)}
<li>
<Link to="/games" getActiveProps={getActiveProps}>
Games
</Link>
</li>
{!isLoggedIn && (
<li>
<Link to="/auth" getActiveProps={getActiveProps}>
Login|SignUp
</Link>
</li>
)}
{isLoggedIn && (
<li>
<Link to="/profile" getActiveProps={getActiveProps}>
Profile {authState.user.name}
</Link>
</li>
)}
{isLoggedIn && (
<li>
<button type="button" onClick={logoutHandler}>
Logout
</button>
</li>
)}
</ul>
</nav>
</header>
for me the issue was that the definition of the ReactLocation was not in the main.tsx. So I fixed it like so:
main.tsx
export const reactLocation = new ReactLocation();
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
App.tsx
import { reactLocation} from './main.tsx';
export const App = () => {
return <Router
location={reactLocation}
routes={appRoutes}
defaultPendingElement={<Spinner />}
defaultPendingMs={10}
>
<MainNavigation />
<Outlet />
</Router>
}
Hope that helps :)
(I was using vite as build tool)
I would like to center the brand logo in my page and it is currently to the side:
Here is my code:
export default function NavBar() {
return (
<Navbar bg='light' fixed='top' className='navbar py-1 '>
<Container>
<HiOutlineMenuAlt4 />
<Navbar.Brand className="justify-content-center">
<img src={publicgoodslogo} width="120" height="65" ></img>
</Navbar.Brand>
<Navbar.Collapse className="justify-content-end">
<Nav>
<Nav.Link><GoSearch /></Nav.Link>
</Nav>
<Navbar.Text>
Cart:
</Navbar.Text>
</Navbar.Collapse>
<Nav>
0
</Nav>
</Container>
</Navbar>
)
According to the docs I should just be able to use justify-content-center but that doesn't work. Is it because I need to wrap the menu icon in something?
I have install bootstrap and import import 'bootstrap/dist/css/bootstrap.css' in my _app.js
But after creating the tabs it does not work can someone help please?
Here is the tab code
import Link from 'next/link'
const NavigationTabs = () => {
return (
<>
<nav>
<div
className='nav nav-tabs mb-3 justify-content-center'
id='tabContentList'
role='tablist'
>
<Link href='#login' className='nav-item'>
<a
className='nav-link active'
id='nav-login-tab'
role='tab'
data-bs-toggle='tab'
data-bs-target='#login'
aria-controls='login'
aria-selected='true'
>
Login
</a>
</Link>
<Link href='#register' className='nav-item'>
<a
className='nav-link active'
id='nav-register-tab'
data-bs-toggle='tab'
data-bs-target='#register'
role='tab'
aria-controls='register'
aria-selected='false'
>
Register
</a>
</Link>
</div>
</nav>
<div className='tab-content' id='nav-tabContent'>
<div
className='tab-pane fade show active'
id='login'
role='tabpanel'
aria-labelledby='nav-login-tab'
>
Tab 1 content
</div>
<div
className='tab-pane fade'
id='register'
role='tabpanel'
aria-labelledby='nav-register-tab'
>
Tab 2 content
</div>
</div>
</>
)
}
export default NavigationTabs
Is there a better way to create it in bootstrap 5 or should I add the script tag from bootstrap?
I have this following component -
import React from 'react';
import {Route, Link} from 'react-router-dom'
import Error from './Error'
class NavigationBar extends React.Component {
render() {
return (
<div className="nav">
<nav className="navbar navbar-inverse bg-inverse">
<ul className="nav navbar-nav">
<li className="nav-item">
<Link to={"/data"} className="nav-link"> Data </Link>
</li>
<li className="nav-item">
<Link to={"/analysis"} className="nav-link"> Analysis </Link>
</li>
<li className="nav-item">
<Link to={"/Monitor"} className="nav-link"> Monitor </Link>
</li>
</ul>
</nav>
<Route path={"/webiks/:user"} component={Error}/>
</div>
);
}
}
export default NavigationBar;
In addition i added a nav.css file to index.html in order to make some changes to the boostrap styling.
The problem is that when entering the "webkis/:user" url the style only boostrap styling without the changes of the nav.css file.
If one can explaing the reason , and also to mention some of the common methods
for styling components (which is NOT an inline styling).
Thanks.
Place nav.css in the same folder as NavigationBar.js, then add this line on your import list: import './nav.css'