NextJS Fast refresh not working as expected

Question

I am building a website with nextjs and Chakra UI. I am using emotion to style my navigation.

The code of navigation component is as follows:

import Link from "next/link";
import { Flex, List, ListItem } from "@chakra-ui/react";
import Image from "next/image";
import styled from "@emotion/styled";

const Nav = styled.nav`
  position: sticky;
  top: 20px;
  z-index: 2;
`;

export default function StickyNav() {
  return (
    <Nav>
      <Flex
        bg='gray.100'
        justifyContent='space-between'
        p='8'
        borderRadius='16'
      >
        <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
        <List display='flex' ml='4'>
          <ListItem mr='8'>
            <Link href='#about'>
              <a>About</a>
            </Link>
          </ListItem>
          <ListItem mr='8'>
            <Link href='#projects'>
              <a>Projects</a>
            </Link>
          </ListItem>
          <ListItem>
            <Link href='#contact'>
              <a>Contact</a>
            </Link>
          </ListItem>
        </List>
      </Flex>
    </Nav>
  );
}

I am having trouble with Fast refreshing. When I start the dev server, the Navigation component picks up the styles correctly

const Nav = styled.nav`
  position: sticky;
  top: 20px;
  z-index: 2;
`;

after serving, if I try to change the top position to 10px the fast refresh doesn't reflect those changes.

The fast refresh feature is working perfectly with other components but has problem with this specific component only. I have looked through several articles but not sure what's causing this behavior.

Answer 1

Check filename or foldername not started with a uppercase

Fast-refresh not works :

fast-refresh works :

Answer 2

Also check if your import statement has right casing.

import Box from '../Components/box';

vs

import Box from '../Components/Box';