Sorry to ask such a silly question but I'm a total rookie and I'm stuck in a tutorial.

I'm getting the following error when trying to run the below:

Attempted import error: 'NavLogo' is not exported from './NavbarElements'

Thank you in advance.

import styled from "styled-components";
import { Link as LinkR } from "react-router-dom";
// import { Link as LinkS } from "react-scroll";

export const Nav = styled.nav`
  background: #000;
  height: 80px;
  margin-top: -80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;

  @media screen and (max-width: 960px) {
    transition: 0.8s all ease;
  }
`;
export const NavbarContainer = styled.div`
  display: flex;
  justify-content: space-between;
  height: 80px;
  z-index: 1;
  width: 100%;
  padding: 0 24px;
  max-width: 1100px;
`;

export const Navlogo = styled(LinkR)`
  color: #fff;
  justify-self: flex-start;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-left: 24px;
  font-weight: bold;
  text-decoration: none;
`;

CodePudding user response：

looks like you have made a typo while exporting

your code:

export const Navlogo = ........... should be:

export const NavLogo = .......

CodePudding user response：

I think the correct title is "Can't import Const in React".

If you want to import non-default things, you must import with curly bracket ({ }). For example, to import Navlogo, import {Navlogo} from './NavbarElements'.

But if you have default export, i.e export default Navlogo;, you can do import Navlogo from './NavbarElements' and the imported object is const Navlogo. For import others const in NavbarElements file, you must do the first way with curly bracket

CodePudding user response：

How are you importing NavLogo?

It should look something like this:

import { NavLogo } from './NavbarElements'; // Path to file