How can I exclude React Refresh from the Create-React-App production build?

Question

Uncaught Error: React Refresh runtime should not be included in the production bundle.

By default, when you do a npm run build, it changes the environment to 'production'. After looking at react-refresh, if the environment is in production, it throws an error that it shouldn't be included.

I have setup a .env file with these environment variables but when I build and serve it locally, I still get the issue. After reading up on the issue, I noticed that setting the environment variables should resolve the issue but it is not working for me.

FAST_REFRESH=false
REACT_APP_FAST_REFRESH=false

Can someone please help me with this issue?

Answer 1

Inbabel.config.js, you should add:

const isEnvDev = process.env.NODE_ENV === 'development'

if (isEnvDev) {
  config.plugins.push('react-refresh/babel')
}

Inwebpack.config.js, you should add:

  const isEnvDev = process.env.NODE_ENV === 'development'

  if (isEnvDev) {
    config.plugins.push(
      new ReactRefreshWebpackPlugin({
        overlay: false,
      }),
    )
  }

and theconfig.pluginsis webpack's config