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.