Enabling Fast Refresh with Expo Web in 2022

I was looking for a solution to have Fast Refresh for Expo for Web just as we have it for ios and Android targets, however I could not find a definitive answer whether it is possible or supported. I even contacted Evan Bacon via twitter who said โ€œHMR is enabled in Expo web, Fast refresh is not.โ€

I found a writeup of Evan from 2020 about this subject:

This almost works but needs some update in 2022, so I thought I share how I made it work. These are the steps:

1. Add necessary libraries

yarn add -D @pmmmwh/react-refresh-webpack-plugin webpack-hot-middleware react-refresh

2. At the moment if this writing (2022. April) thereโ€™s some issue with react-error-overlay which needs this fix in package.json

  "resolutions": {
    "react-error-overlay": "6.0.9"
  },

3. Eject the Webpack config:

expo customize:web

3. In your newly created webpack.config.js:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Use the React refresh plugin in development mode
  if (env.mode === "development") {
    config.plugins.push(
      new ReactRefreshWebpackPlugin()
    );
  }
  return config;
};

And done. From now on your expo for web project supports fast refresh.

Thank you for sharing your findings and work with the community, @beep! :clap:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.