After having spent hours trying to fix these warnings in a project I am working, on having tried everything including:
- No anonymous functions.
- No exports other than the default export in component files.
- Capitalizing function names.
- Deleting the .next folder.
- Deleting the Inter Google Fonts import from index.tsx.
...I have just tried to start from scratch with a new pnpm create next-app
(with typescript, eslint, src folder and no experimental app folder) and to my surprise the warnings are still there even in a fresh app:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 806 ms (165 modules)
wait - compiling /_error (client and server)...
event - compiled client and server successfully in 65 ms (166 modules)
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
wait - compiling / (client and server)...
event - compiled client and server successfully in 104 ms (195 modules)
warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
The warnings/errors reappear even if I relaunch the app with no changes, the browser's console has no errors whatsoever and next does not give any indication of where the problem might be. The app actually compiles and works with no problem other than the warnings/full reload.
Is this expected and should be ignored or is there something wrong that escapes me? The only weird thing I can think of is that I develop in WSL2 (Windows 11) with an Ubuntu environment. Some people had problems in the past with Fast Refresh and WSL but they claim them to be solved since Next 12.