Hi @vital sonnet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Problems with local components not loading
open depotBOT
Based on the extracts provided, it seems like you're encountering a couple of issues with Next.js.
-
Fast Refresh had to perform a full reload: This issue is discussed in the Github Issue 40184 (https://github.com/vercel/next.js/issues/40184). Some users have reported that this issue can be resolved by upgrading to the latest version of Next.js or by upgrading Node.js to at least version 14. Another potential cause could be having an open browser tab pointing to your local server when you run your app. If the page tries to re-establish its connection to a newly launched dev server, it might fail to load a now-obsolete “hot-update” manifest URL and as a fallback, the app performs a full reload.
-
webpack.cache.PackFileCacheStrategy Caching failed for pack: This issue is discussed in the Github Issue 47394 (https://github.com/vercel/next.js/issues/47394). It seems like the error is related to the webpack cache. Unfortunately, the extracts do not provide a clear solution to this issue.
For the module not found error, you can refer to the Next.js documentation (https://nextjs.org/docs/messages/module-not-found) for potential solutions.
Please note that these are potential solutions based on the information provided in the extracts. For a more accurate solution, it would be best to provide a detailed description of your issue on the Next.js Github issues page or on other relevant forums.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
vital sonnet
@open depot This is the problem: Fast Refresh had to perform a full reload due to a runtime error.
⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
open depotBOT
Let me check the knowledge base for you. One moment! :books:
The "Fast Refresh had to perform a full reload" message is a warning that occurs when Next.js's Fast Refresh feature is unable to perform a live update of your page and has to fall back to a full page reload. This can happen due to a variety of reasons, such as runtime errors in your components, or if the page was originally loaded from a different running instance of the dev server.
According to the Github Issue 40184 (https://github.com/vercel/next.js/issues/40184), some users have reported that upgrading to the latest version of Next.js or Node.js can help resolve this issue. Another potential cause could be having an open browser tab pointing to your local server when you run your app. If the page tries to re-establish its connection to a newly launched dev server, it might fail to load a now-obsolete “hot-update” manifest URL and as a fallback, the app performs a full reload.
If you're seeing this warning due to a runtime error, you might want to check the Next.js documentation on Error Resilience (https://nextjs.org/docs/architecture/fast-refresh). If a runtime error occurs inside your component, Next.js will display a contextual overlay. Fixing the error will automatically dismiss the overlay, without reloading the app. If the error occurred during rendering, React will remount your application using the updated code.