5

I have a Next.js project that has been a real delight to work on until recently when changes stopped showing up in the browser. Normally the browser hot reloads, but now even hitting refresh won't show changes to the code—I have to shut down the dev server and run npm run dev again to get the changes to show up. This doesn't happen in all my Next.js projects—just one of them.

I've tried deleting the .next/ directory, but that didn't fix the problem. Any other ideas of where I could look to get this back to normal?

  • Next 12.1.0
  • Node 14.18.1
  • macOS 12.3
sea_monster
  • 659
  • 3
  • 8
  • 18
  • Are you making changes to your back-end node server or the front-end? Generally, only the front-end changes will automatically reload. Changes made to the server show on server restart. – Richard Avenia Mar 28 '22 at 15:49
  • I'm just making changes to the front-end—updating text and JSX tags and whatnot. – sea_monster Mar 29 '22 at 18:11
  • Did you fix this in the end? – Chris Haupt May 08 '22 at 19:06
  • 1
    Nope, I never figured out what was going on. I did narrow the problem down to a single component. Like: changes to this one component won't show up in the browser until restarting the server, but everything else works as expected. Shrug! – sea_monster Jun 02 '22 at 15:19

3 Answers3

3

I had the same issue. In my case it was case sensitivity.

It turned out I renamed one of my components where the new name only had a letter changed from uppercase to lowercase (e.g. MyCOmponent.tsx -> MyComponent.tsx).

I made all the changes everywhere but missed one, the import path of the component in one of the pages. I had: import MyComponet from '../../MyCOmponent.tsx'

Everything still worked when restarting the server, but hot reload or even browser refresh wouldn't, same as OP. Fixing the typo fixed everything.

Symyon
  • 388
  • 2
  • 10
  • 1
    Wow, such an easy thing to miss! I had imported as `Tracklist` when it should have been `TrackList`. This solved my issue—thank you! – sea_monster Sep 01 '22 at 19:39
0

I faced the same issue. I created a new file with a different name and copied all the content which was inside the file that did not show the changes. Then it started showing the changes in the browser.

Arosha Jayathilake
  • 1
0

If you are using next.js. Simply use

npm run dev

and make sure you have "scripts":{"dev": "next dev"} line added to your package.json.

Hope it helps

Bilal Arif
  • 1