Unintended page refresh with webpack5

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

12.14.1

What browser are you using?

Chrome

What operating system are you using?

macOS 11.2.3

How are you deploying your application?

debug mode(next dev)

Describe the Bug

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.

To Reproduce

// News.tsx

const News = () => {
  const { data } = useSWR("/api/!@#$", async ( ) => {
    const res = await fetch('/api/!@#$');
    const json = await res.json();
    return json;
  });

  //   ..
}

// /api/!@#$/index.ts

const requestHandler: RequestHandler = async (req, res) => {
  const cacheManager = getCacheManager();
  switch (req.method) {
    case "GET": {
      const cache = cacheManager.get(cacheKey);
      if (cache) {
        return res.status(200).json({ data: cache });
      }

      try {
        const { data } = await NewsApi.get<Post[]>("/posts"); // wordpress rest api
        cacheManager.set(cacheKey, data, 60 * 15);
        return res.status(200).json({ data });
      } catch (e) {
        return res.status(500).end();
      }
    }
    default:
      return res.status(404).end();
  }
};

export default requestHandler

// next.config.js
module.exports = {
  future: {
    webpack5: true,
  },
}
``

[ijjk]

Hi, I think we tracked this down to https://github.com/vercel/next.js/pull/25735 can you please update to v10.2.4-canary.3 and see if you are still seeing the unexpected page reloading with webpack 5?

[sMteX]

I’m seeing something similar - a TON of fast refresh rebuilding or refreshing page data due to server-side change (despite me not touching keyboard, let alone the code), which leads to very annoying refreshes or redirects to /. This was not the case prior to our latest upgrade (we were running on Next 9.5.5 IIRC).

EDIT: Maybe it’s my imagination or hope, but turning off Webpack5 with future: { webpack5: false } in config seemed to help a little.