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.

score 11 · Answer 1 · answered Aug 07 '21 at 10:15

11

Check filename or foldername not started with a uppercase

Fast-refresh not works :

fast-refresh works :

answered Aug 07 '21 at 10:15

ZnK88

141
4

score 7 · Answer 2 · answered May 04 '22 at 20:31

7

Also check if your import statement has right casing.

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

vs

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

answered May 04 '22 at 20:31

DeadBoyPiotrek

123
2
5

1

thanks for pointing that out. I think upper and lowercase can be confusing for beginners. – Anonymous Feb 15 '23 at 20:05

score 0 · Answer 3 · answered Nov 18 '22 at 08:30

0

in my case, the two words filename should use dash -, rather than underscore _.

For example:

good filename: hello-world.js

bad filename: hello_world.js

answered Nov 18 '22 at 08:30

new2cpp

3,311
5
28
39

Nathan L · Answer 4 · 2023-01-03T03:28:46.037

0

As @new2cpp and DeadBoyPiotrek Stated

When Importing your headers make sure your import statements match the file names.

Navbar.js <--Example File name

import Navbar from "../components/Navbar"

Not

import Navbar from "../components/navbar"

When I made this mistake the Fast Refresh would initially load then after changing something the Fast Refresh would continue rebuilding but never finish.

edited Jan 03 '23 at 03:28

answered Dec 29 '22 at 21:17

Nathan L

1
2

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33522398) – Darren G Jan 01 '23 at 22:50

score 0 · Answer 5 · answered Jul 08 '23 at 16:55

I had a similar issue and looked up the names of the imports. In my layout.jsx file, I was importing the Nav component like this: import Nav from "@/components/nav"; which was the main issue to stop fast refresh. I changed this to import Nav from "@/components/Nav"; and the fast refresh is working fine.

NextJS Fast refresh not working as expected

5 Answers5