208

I've been following the basics tutorial on the Next.js website and when I got to the Global Styles step, I started getting the following runtime error:

ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed.
(error: http://localhost:3000/_next/static/chunks/fallback/node_modules_next_dist_client_dev_noop_js.js)

Error 1:
Screenshot of error (1)

Error 2:
Screenshot of error (2)

I followed all the steps exactly and when I close the error pop-up, the app works fine.

If anyone can provide any guidance on this I'd appreciate it a lot!

deb
  • 6,671
  • 2
  • 11
  • 27
Abdullah Raja
  • 2,083
  • 2
  • 4
  • 5

6 Answers6

581

Delete the .next folder at the root of your project, relaunch your project, and force-refresh your page (Shift+F5 / Cmd+Shift+R) to remove the cache.

It apparently is a cache issue. After browsing through GH Issues & various blog posts, my conclusion is that nobody knows what the heck is going on with this webpack-related error, probably caused by Next.js's behavior.

deb
  • 6,671
  • 2
  • 11
  • 27
  • 27
    As a side note: this answer is 1 week old, and it already has 5 upvotes. This is a real problem, and wherever it comes from, it needs to be fixed... – deb May 31 '21 at 20:24
  • 5
    Allow me to add my upvote, happened after modifying rewrites and changing the pages folder structure... :) – Richard87 Jun 01 '21 at 08:57
  • 2
    For those using Nx, I deleted the `/dist/` folder to get it working. Probably actually only needed to trash one of the next folders inside there but yea, that worked for me. – John Fisher Sep 24 '21 at 07:49
  • Not sure why this is selected as the answer, it doesn't have any info on how to solve the problem. The answer from @amin-amin worked for me. – Michael Edwards Oct 01 '21 at 10:16
  • 1
    @MichaelEdwards hi, thanks for the feedback. I guess it's because I answered earlier. amin-amin wrote the same answer, the fact you have to delete the cache is pretty much implied. I'll edit my answer to make it more clear. – deb Oct 05 '21 at 07:12
  • Actually, for me, part of the problem was that I created `postcss.config.js` as shown in the tutorial at https://nextjs.org/learn/basics/assets-metadata-css/styling-tips. Once I deleted that file and then followed the steps of this answer, my project ran well again. – Ryan Oct 06 '21 at 19:19
  • Thanks @a2br, this had me reverting git commits and I could not figure it out. This solved the issue (now I wonder what will solve the bug!) – sadhucoder Oct 11 '21 at 17:03
  • This happened to me when adding a new npm package to a newer project with <100 commits. (Likely doesn't matter, but it was https://github.com/auth0/nextjs-auth0). – Jeff Oct 11 '21 at 18:10
  • This is the answer, it happend because of removing and playing with structure – Mohammed Saber Mohammed Oct 17 '21 at 20:11
  • Holy shit, someone needs to create an issue on Next.js repo. This has 337 upvotes for a reason. **Edit:** someone already [created an issue 21 days ago](https://github.com/vercel/next.js/issues/29455) – deadcoder0904 Oct 19 '21 at 10:53
  • FWIW; Am using VS Code. I think what did it for me was I undeleted a file in the interface via ctrl-z – gorlaz Nov 04 '21 at 06:40
  • Turns out this is still an issue, but this solution worked for me thank you – labago Dec 03 '21 at 16:45
  • I still have this issue and deleting .next folder and hard refresh browser did not solve it. Issue comes randomly – Kristi Jorgji Feb 04 '22 at 18:02
  • This happens to me like once a month. Mindblowing that it isn't fixed yet. – Neil Aug 04 '22 at 14:44
  • This still appears to be an issue in 2023, NextJS 13, with the app router. However, if I delete the .next folder, the dark mode no longer functions in my app. Very strange. – Chris Sep 02 '23 at 17:38
30

I had this error after removing files from the /public folder.

How I fixed it:

  1. Remove your /.next folder.
  2. Launch your project again.
  3. Force refresh in you browser to delete the cache.
Julia Shestakova
  • 869
  • 9
  • 16
EILYA
  • 358
  • 4
  • 5
6

In my case i had my next.js build directory with a different name as hosted with firebase cloud functions. Follow these similar steps

  1. Delete your build (distDir) directory (mine was called nextjs)
  2. Restart the server
  3. Force Refresh the browser
Syed Zain Jeelani
  • 549
  • 6
  • 5
2

For me, the problem appeared when I added a plugin to tailwind.config.js (using tailwind)

maybe this will help someone locate strange nextjs behavior

Alan W. Smith
  • 24,647
  • 4
  • 70
  • 96
Jaxoo Jack
  • 50
  • 3
1

In my case, I couldn't find the .next folder to be deleted.

Delete all the contents of the build / folder. This worked for me.

Franco Salcedo
  • 11
  • 3
1

I deleted the .next folder in VSC. The console log generated more errors, so I then restored the folder back to the project. The errors disappeared.

Natashia bryson
  • 11
  • 1