When I turn on webpack5 and call internal api(/api/*) from page after first render, the page refreshes and logs Refreshing page data due to server-side change. after refreshing once, it works fine as webpack4.
Expected Behavior The page should not refresh on api call after first render.
I recently updated to Next JS 12 and suddenly started encountering this issue also. I'm not sure if it's necessarily related to that as I believe Next JS 11 was also using Webpack 5 for HMR, but they certainly switched over to socket communication for hot reloading, rather than server sent events as they had with previous versions. [https://nextjs.org/docs/upgrading#nextjs-hmr-connection-now-uses-a-websocket]
I have a file /inc/paths.js where I am organizing and exporting URI path string variables for different resources in my app. There were a number of paths in that module which were also being utilized by parts of my /api scripts, namely object keys for AWS S3 bucket paths. So, this module was being imported by not only React components in the /pages directory and elsewhere, but also to the modules in the /api directory. By moving all the variables used by the /api modules into their own file and making sure that none of those variables are imported by React components or pages, the error seems to have disappeared for me.
This may be related to this quote from Vercel:
Finally, if you edit a file that's imported by files outside of the React tree, Fast Refresh will fall back to doing a full reload. You might have a file which renders a React component but also exports a value that is imported by a non-React component. For example, maybe your component also exports a constant, and a non-React utility file imports it. In that case, consider migrating the constant to a separate file and importing it into both files. This will re-enable Fast Refresh to work. Other cases can usually be solved in a similar way. https://nextjs.org/docs/basic-features/fast-refresh
Although the logic doesn't quite match up, it leads me to believe there is something occurring along those lines.
I updated next.js due to the console warning I get whenever next.js run, telling me its using using weppack 4 instead of 5
You can still use webpack 4 by changing it from your next config as it's an update issue
On the client page, I changed to call the internal API by useEffect() hook to fetch data, instead of triggering the data-fetch function by onclick. I found the issue was gone.
