reportWebVitals seems to disable fast refresh in some cases

[chrisdrackett]

Bug report

Describe the bug

I'm still working through this and have yet to reproduce in a small example. In our app if you add

export function reportWebVitals(metric) {
  console.log(metric)
}

to _app.tsx fast refresh will no longer work for some components. Take the above out and it appears to work for everything.

[Timer]

Happy to take a look if you provide a demo!

[chrisdrackett]

ok, was able to recreate this on a small scale. I wonder if this is related to our other issues.

in this branch: https://github.com/chrisdrackett/next-external-test/tree/broken

if you comment out the code here: https://github.com/chrisdrackett/next-external-test/blob/broken/web/pages/_app.tsx#L7

fast refresh will work (when editing https://github.com/chrisdrackett/next-external-test/blob/broken/external/src/Wrapper.tsx), if you leave it in editing the same file will result in a full refresh

[imranbarbhuiya]

I'm experiencing this issue. In nextjs v12, if I edit _app.tsx, my fast refresh wasn't working but for other pages, it was working. As I don't edit _app.tsx much so I had no issue. But after upgrading to nextjs v13, any page I edit, it's performing a full refresh. I was confused about why it was happening. At first, I thought it might be due to I was using both /app and /pages dir but later I checked all my pages to make sure I'm not exporting any fs along with jsx element and found that only _app.tsx exports reportWebVitals function. I removed it and everything is working fine.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.