I know my path is correct because it takes the styles if I don't add module to the extension. I'm working from a bootcamp which is over a year and a half old and trying to research any potential breaking changes, but having no such luck.
Says link is not defined and my scss file has no default export.
Thanks
.link {
color: green;
}
import React from "react"
import { Link } from "gatsby"
import headerStyles from "../styles/header.module.scss"
const Header = () => {
return (
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>
<Link className={headerStyles.link} to="/">
Home
</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</header>
)
}
export default Header
import React from "react"
import { Link } from "gatsby"
import headerStyles from "../styles/header.module.scss"
const Header = () => {
return (
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>
<Link className={headerStyles.link} to="/">
Home
</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</header>
)
}
export default Header
After updating gatsby to version 3, I was in the same situation.
* as sth would be fine if you want to import an entire module.
import * as headerStyles from "../styles/header.module.scss"
import { link } from "../styles/header.module.scss"
Fixed it moments after posting with destructuring.
import * as headerStyles import './header.module.scss'
Related
Below are my Header.js component and App.js respectively,
// Header.js
import React from 'react'
import { Link } from 'react-router-dom'
const Header = () => {
return (
<div className='header'>
<nav>
<div className= 'logo'>
<h1>
Damien
</h1>
</div>
<ul className='ul-items'>
<li>
<Link to= '#'>Home
</Link>
</li>
<li>
<Link to= '#'>Projects
</Link>
</li>
<li>
<Link to= '#'>About
</Link>
</li>
<li>
<Link to= '#'>Contact
</Link>
</li>
<li>
<Link to= '#'>Services
</Link>
</li>
</ul>
</nav>
</div>
)
}
export default Header;
//App.js
```
import './App.css';
const App = () => {
return (
<div className="App">
<Header/>
</div>
);
}
export default App;
```
Idk what else to try, Ive looked on youtube for tutorials and googled my problem and have found nothing
I think it is beacause you use <Link> from react-router-dom but you didn't set a Router
https://v5.reactrouter.com/web/guides/quick-start/1st-example-basic-routing
you must checkout your "scripts section" in your package.json document
also checkout if you are in the right Working Directory for execute the script "start" place in the project folder
I have a project in NextJS, where I'm making the NavBar component.
In wide screen it's got the links along the top, and in mobile there's a burger menu which opens a dropdown
Up to this point it all works great, links work.
Then I thought it'd be nice to add an OutsideClickHandler for when it's in mobile mode - i wired in https://www.npmjs.com/package/react-outside-click-handler
but with this addition, the links for my dropdown no longer work - effectively the whole screen (aside from my burger) is being 'listened to' at triggering the OutsideClick.
I'm extremely new to all this. I figure it's because it's just listening to the burger icon. But I have no idea where to start to remedy this, and would super appreciate some input! Half a thought being to apply the OutsideClick handler to the SideMenu component somehow, but I'm puzzled because it's logic otherwise is in NavBar.
Thanks so much.
My apologies I can't link to github as I'm on a branch and my mentor is busy on a tech interview and I don't want to pull request it yet!
NavBar.js - without OutsideClickHandler - links on Side Menu work fine
import { useState } from "react";
import Link from "next/link";
import styles from "../NavBar/NavBar.module.css";
import ButtonBase from "../button/buttonPrimary";
import SideMenu from "../SideMenu/SideMenu";
import MenuItems from "../../../data/MenuItems/MenuItems";
const NavBar = () => {
const [menuIsOpen, setMenuIsOpen] = useState(false);
const toggleMenu = () => {
if (menuIsOpen === false) {
setMenuIsOpen(true);
} else {
setMenuIsOpen(false);
}
};
return (
<nav className={styles.navBarBox}>
<div className={styles.menuIcon}>
<i className={"fas fa-bars fa-2x"} onClick={toggleMenu}></i>
</div>
<div className={styles.mobileSideMenu}>
{menuIsOpen ? <SideMenu /> : <div></div>}
</div>
<ul className={styles.navMenu}>
{MenuItems.map((item) => (
<li className={styles.navItem} key={item.id}>
<Link href={item.path}>{item.title}</Link>
</li>
))}
</ul>
<Link href="/contact-me">
<a className={styles.contactMeWeb}>
<ButtonBase label="Contact Me" isPrimary={false}></ButtonBase>
</a>
</Link>
<Link href="/contact-me">
<a className={styles.contactMeMobile}>
<i className={"fa-solid fa-message fa-2x"}> </i>
</a>
</Link>
</nav>
);
};
NavBar.js - with OutsideClickHandler - OutsideClickHandler works, but links in side menu only act as an outside click
import { useState } from "react";
import Link from "next/link";
import OutsideClickHandler from "react-outside-click-handler";
import styles from "../NavBar/NavBar.module.css";
import ButtonBase from "../button/buttonPrimary";
import SideMenu from "../SideMenu/SideMenu";
import MenuItems from "../../../data/MenuItems/MenuItems";
const NavBar = () => {
const [menuIsOpen, setMenuIsOpen] = useState(false);
return (
<nav className={styles.navBarBox}>
<OutsideClickHandler
onOutsideClick={() => {
setMenuIsOpen(false);
}}
>
{/* BURGER ICON */}
<a
className={styles.menuIcon}
onClick={() => setMenuIsOpen(!menuIsOpen)}
>
<i className={"fas fa-bars fa-2x"}></i>
</a>
</OutsideClickHandler>
{/* SIDE MENU */}
{menuIsOpen && (
<div className={styles.mobileSideMenu}>
<SideMenu />
</div>
)}
<ul className={styles.navMenu}>
{MenuItems.map((item) => (
<li className={styles.navItem} key={item.id}>
<Link href={item.path}>{item.title}</Link>
</li>
))}
</ul>
<Link href="/contact-me">
<a className={styles.contactMeWeb}>
<ButtonBase label="Contact Me" isPrimary={false}></ButtonBase>
</a>
</Link>
<Link href="/contact-me">
<a className={styles.contactMeMobile}>
<i className="fa-regular fa-envelope fa-2x"></i>
</a>
</Link>
</nav>
);
};
export default NavBar;
SideMenu.js
import MenuItems from "../../../data/MenuItems/MenuItems";
import styles from "../SideMenu/SideMenu.module.css";
const SideMenu = () => {
return (
<div className={styles.mobileMenuBox}>
<ul className={styles.mobileMenu}>
{MenuItems.map((item) => (
<li className={styles.mobileItem} key={item.id}>
<Link href={item.path}><div>{item.title}</div></Link>
</li>
))}
</ul>
</div>
);
};
export default SideMenu;
SOLVED!
I just dragged the:
{menuIsOpen && (
<div className={styles.mobileSideMenu}>
<SideMenu />
</div>
)}
between the
<OutsideClickHandler></OutsideClickHandler>
tags
I'm receiving errors stating - x Expression expected and Unterminated regexp literal...1
The code I'm having issues with is the following:
import Link from 'next/link';
import React from 'react';
import {useContext} from "react";
import {UserContext} from "../lib/context";
// Top Navbar
export default function Navbar() {
const { user, username } = useContext(UserContext)
return (
<nav className='navbar'>
<ul>
<li>
<Link href="/">
<button>FEED</button>
</Link>
</li>
{/* user is signed in and has username */}
{username && (
<div>
<li className='push-left'>
<Link href="/admin">
<button className="btn-blue">Write Posts</button>
</Link>
</li>
<li>
<Link href={`/${username}`}>
<img src={user?.photoURL} alt=/>
</Link>
</li>
</div>
)}
{/* user is not signed in OR has not created username */}
{!username && (
<li>
<Link href="/enter">
<button className="btn-blue">Log in</button>
</Link>
</li>
)}
</ul>
</nav>
)
}
Does anyone have an idea as to why this may be happening?
Check line 29. <img src={user?.photoURL} alt=/>
The alt tag should contain at least an empty string:
<img src={user?.photoURL} alt=""/>
I hope that helps :)
Thanks, I solved it by switching to double quotes instead of single quotes in the HTML/CSS.
I want to change my navbar title to log out after I logged in, however, my auth check function is in my login component class, how can I link them up as this nav is not a component itself.
import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => (
<nav className="navbar navbar-dark bg-dark navbar-expand-lg">
<Link to="/" className="navbar-brand">Home</Link>
<div className="collpase navbar-collapse">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/login" className="nav-link">{}</Link>
</li>
<li className="navbar-item">
<Link to="/Signup" className="nav-link">Sign up</Link>
</li>
</ul>
</div>
</nav>
);
export default Header;
you have to put the state that holds the logging data in high place so you could pass the data to all the components below it.
redux makes it much easier.
I am trying to add the Auth0 button to a navbar but the jsx linter does not like it when I add javascript. I need the conditional so it shows up for non registered users. I have tried importing it from another component ion React as well as adding it directly in the jsx with no luck. I keep getting isAuthenticated' is not defined and loginWithRedirect' is not defined. Not sure what to do next. Thanks.
import $ from 'jquery'
import '../styles/nav.scss'
import button from '../components/GoogleButton/Button.jsx'
import { auth0 } from './auth0/react-auth0-spa'
export default class NavBar extends Component {
componentDidMount() {
$(document).ready(function() {
$('.mobile-button a').click(function(e) {
$(this)
.parent()
.parent()
.toggleClass('open')
$(this).html($(this).html() === 'Close Menu' ? 'Menu' : 'Close Menu')
e.preventDefault()
})
})
}
render() {
return (
<div>
<header class='header'>
<div class='container'>
<h1 class='site-title'>Super Cool Web App!</h1>
<span class='site-tagline'>Because Andy made this!</span>
</div>
</header>
<nav class='main-nav'>
<div class='container'>
<ul>
<li class='mobile-button'>
<a href='/'>Menu</a>
</li>
<li>
<a href='/'>About</a>
</li>
<li>
{/* this is where the problem lies */}
{!isAuthenticated && (
<button onClick={() => loginWithRedirect({})}>Log in</button>
)}
</li>
<li>
<a href='/'>Methods</a>
</li>
<li>
<a href='/'>Results</a>
</li>
<li>
<a href='/'>Contact</a>
</li>
<li>
<a href='/'>Methods</a>
</li>
<li>
<a href='/'>Results</a>
</li>
<li>
<a href='/'>Contact</a>
</li>
</ul>
</div>
</nav>
</div>
)
}
}```
authO is for initializing you need to use useAuthO to access the api elsewhere in your project.
Change your import statement to:
import { useAuth0 } from "../react-auth0-spa";
Then deconstruct AuthO methods isAuthenticated and loginWithRedirect.
Right under render and before your return put:
const {isAuthenticated , loginWithRedirect} = useAuth0
https://auth0.com/docs/quickstart/spa/react#create-the-navbar-component