Fast Refresh - updated to 9.4.0, still hard refresh on save

[taylor-lindores-reeves]

I would like to know why the application is still hard refreshing on save. Currently in my package.json I have:

"scripts": {
"start": "NODE_ENV=production node server.js",
"dev": "next dev",
"build": "next build",
"next": "next start"
}

Running next dev still gives hard refresh, any idea why? Do I need to include Fast Refresh in my config, or is there something possibly causing the hard refresh?

[taylor-lindores-reeves]

Can confirm that this custom babel config prevents Fast Refresh from working:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "modules": "commonjs",
          "targets": {
            "browsers": ["last 2 versions", "ie >= 11"]
          }
        }
      }
    ]
  ]
}

[estevaolucas]

Yeah. I was experiencing the same issue. Fast Refresh doesn't work with { "preset-env": { "modules": "commonjs" } }

I had to change it to { "preset-env": { "modules": false } }, which is expected in order to have wepback code splitting: https://nextjs.org/docs/advanced-features/customizing-babel-config

Maybe this is a information to be included in here: https://nextjs.org/docs/basic-features/fast-refresh#limitations

[jamesmosier]

Could you provide some example code?

Class components and unnamed function components will cause a full refresh. Also beware that higher order class components could cause it as well.

I used that babel config with this repo from this discussion and Fast Refresh worked as expected.

[taylor-lindores-reeves]

Hi James, I did try it with the one you suggested and it works. But for some reason, when I have a .babelrc with the code in my previous response, there is a hard refresh.

[Timer]

Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React tree.

You might have a file which renders a React component but also exports a value that is imported by a non-React component. Consider migrating the non-React component export to a separate file and importing it into both files.

It is also possible you are using class components at the top-level of your application, which disables Fast Refresh. Fast Refresh requires at least one function component in your React tree.

[kikoanis]

Thanks for taking the time to respond. But unfortunately, this is not helpful. I can see the same message in console. Until, fast refresh is mature enough to tell us exactly why it is doing hard refresh, I am abandoning it for now (5 seconds to reload a whole application is really counter-productive)
Since it is embedded in 9.4, is there a way to disable fast refresh and going back to hot reload?

[Timer]

It is not possible to disable. Please provide a full reproduction and we can help you find the issue.