ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed

Question

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:

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!

Solution 1

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.

Solution 2

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.

Solution 3

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

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[deb]

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...

[Richard87]

Allow me to add my upvote, happened after modifying rewrites and changing the pages folder structure... :)

[Natashia bryson]

This error has returned. I have to do more troubleshooting. I'll comment back once this is fully resolved.

[John Fisher]

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.

[Michael Edwards]

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.

[deb]

@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.

[Ryan]

Actually, for me, part of the problem was that I created postcss.config.js as shown in the tutorial at 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.

[sadhucoder]

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!)

[Jeff]

This happened to me when adding a new npm package to a newer project with <100 commits. (Likely doesn't matter, but it was github.com/auth0/nextjs-auth0).

[Mohammed Saber Mohammed]

This is the answer, it happend because of removing and playing with structure

[deadcoder0904]

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

[gorlaz]

FWIW; Am using VS Code. I think what did it for me was I undeleted a file in the interface via ctrl-z

[labago]

Turns out this is still an issue, but this solution worked for me thank you

[Kristi Jorgji]

I still have this issue and deleting .next folder and hard refresh browser did not solve it. Issue comes randomly