Fast Refresh does not compile automatically after saving a change in pages/index.js

[ysmike]

What version of Next.js are you using?

12.0.3

What version of Node.js are you using?

14.15.0

What browser are you using?

95.0.4638.69 (Official Build) (arm64)

What operating system are you using?

macOS Monterey 12.0.1

How are you deploying your application?

next dev

Describe the Bug

After creating a project using yarn create next-app and running the app using with yarn dev, I'm able to see the contents of pages/index.js in http://localhost:3000/.

However, when I change some text and save the pages/index.js file, I see neither the event - compiling ... logging in the terminal nor the changed text being reflected in http://localhost:3000/. Refreshing the page or clearing cache on the page doesn't trigger the change. The only way to see the change that I've found so far is to kill the server and restart manually.

I've tried other package installers, different versions of node and next.js, various browsers, and on both Intel-chip and Apple-chip laptops only to face the same issue. I'm probably doing something wrong here and I need help getting unstuck. Any help?

Expected Behavior

The text changed and saved in the index.js file should be reflected in localhost without having to manually restart the server.

To Reproduce

• create a project using yarn create next-app
• cd into the directory of the created project
• run the app using with yarn dev
• change text in pages/index.js and save file
• observe that the change is not reflected in localhost

[timneutkens]

Maybe you have a leftover service worker? We have extensive tests covering Fast Refresh so it must be a specific case on your machine, in general that has been that a serviceworker from another projected was loaded.

Converting this to the GitHub discussions help section 👍

[ysmike]

@timneutkens I've cleared all service workers, cache, ad blockers, and disabled all extensions to no avail. I've even tried formatting the machine.

One odd phenomenon is that rarely hot reload works after a few minutes have passed since making a change to a file. Most of the time though, the change never gets reflected even after refreshing the page. Having to kill and start the server to see each change has been tough.

Could you provide a workaround to this feature (like rs of nodemon) or any help with my case?

[leerob]

Do you have any security software or other globally installed applications on your machine that might be affecting things? Based on what you've described, it does sound like a machine-specific issue. This could help us debug what's on your machine that's causing this 😄

[timneutkens]

Was just looking at this again, based on what you mentioned I don't think it's a browser issue. It sounds like there are no file changes detected as you mentioned there is no compiling... message in the console 🤔 Just to double check could you run WATCHPACK_POLLING=true yarn dev, this will poll files instead of relying on filesystem events. That'll help narrow it down.

[ysmike]

Thanks for offering a way to narrow this down. Unfortunately, I did not notice a difference after running the command you provided. I wonder if migrating over from Intel-chip to M1 is causing some confusion in detecting changes in the filesystem. If we're out of options, I'm willing to reset my machine to see if that helps.

[timneutkens]

I'm just not sure what else to do, I'm on a M1 machine (M1 Max Macbook Pro) and at this point we're fairly certain there is something on your machine that is causing the problem 🤔

[ysmike]

@timneutkens @leerob Thanks for looking into this. I think I've found the issue here: I had my project in a hidden directory ~/.git. The problem was solved when I moved the project to a directory that does not have a leading period in its name.

[timneutkens]

.git is excluded from watching so that makes a lot of sense!

[favourdev1]

funnily enough , i also exprience this problem ..... I Was working on my next app, then all of a sudden it stopped hot reloading until i close the server and run it again. Even after running it again , when i make a change while the server , it still doesnt reflect the change until i restart the server again

my version = Next.js (14.1.3)

i later found out i misstyped a component name while importing it

i was trying to import
import EmptyContent from './emptyContent'
while the actual file was
import EmptyContent from './EmptyContent'

and it kept on not autocompiling until i made the change

[TommySorensen]

This is a common problem. I recently had the same issue fixed by using the correct filename in export.

// Wrong
export { Tooltip } from './Tooltip';
// Correct
export { Tooltip } from './tooltip';

[panchanan16]

I am just faced the same issue and searching for solution all over internet and just now discovered your comment and solved the issue 😂😂😂