If you've used Expo on iOS or Android recently you've probably used Fast Refresh (by Dan Abramov) to achieve stateful hot reloading during development. But how do you use Fast Refresh with Expo for web.?.. (Pretty easily).
On web this will update the DOM without reloading the page, this means the state will remain the same across updates. To fully update you can simply reload the window with ⌘ + R.
🤔 How to use
Currently there's no official Fast Refresh Webpack plugin, but you can get started today using a great community plugin by Michael Mok!
- Bootstrap a new universal React Native project:
-
Expo:
expo init
then select any project -
Other:
npx create-react-native-app
-
Expo:
- Install the community Fast Refresh package:
yarn add -D @pmmmwh/react-refresh-webpack-plugin webpack-hot-middleware
- Eject the Webpack config:
expo customize:web
- 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({ disableRefreshCheck: true })
);
}
return config;
};
- Now in your
babel.config.js
:
module.exports = function (api) {
// This caches the Babel config by environment.
api.cache.using(() => process.env.NODE_ENV);
return {
presets: ["babel-preset-expo"],
};
};
- Now run
expo start:web
to use it!
💡 BTW
When the official React fast refresh has been released, we will work on unifying it with native to create a universal solution. Until then this is a pretty nifty little feature! :]
Why share now then?
I got the idea for this tutorial from my friend Tim Neutkens of Next.js. I highly recommend using Next.js with Expo for web especially for navigation!
![]()
React Fast Refresh fully integrated with Next.js soon 🚀
Amazing work by @timer150, @wSokra, and @dan_abramov
See the early demo below 🍿18:37 PM - 19 Apr 2020
👋 That's all
Thanks for reading, that's all I've got for you today. Let me know if you enjoyed this article, and reach out if you have any more questions!
Top comments (13)
I also couldn't make it work, both with
@expo/webpack-config 0.12.20
and@expo/webpack-config 0.12.17
.My save does trigger a new compilation, but the webpack message sent via websocket to the browser is
{"type": "invalid"}
This was the result for me (though I didn't do this on a new project, but an existing one):
Invalid options object. React Refresh Plugin has been initialized using an options object that does not match the API schema.
remove disableRefreshCheck (deprecated option)
This is broken by @expo/webpack-config 0.12.20. And not just fast refresh: no refreshes happen at all.
The issue was opaque, but after enough digging I found pinning that dependency to @0.12.17 restored fast refresh functionality.
Followup: I no longer experience this problem with @expo/webpack-config 0.12.25.
Great tutorial!
In my case to make it work, @younes0 change was required, and additional command to solve issue with this library:
yarn add -D react-refresh
After that is working, Expo SDK 46.
expo customize:web
doesn't appear to work anymore.It just says 'Exiting with no change...'
EXPO is my favorite
it doesn't seem to work for me
ah nevermind. it worked after upgrading Expo
I was an expo fan, untill I started using Flutter :)
Current not working. please update
I could make it work in 2022 like this:
forums.expo.dev/t/enabling-fast-re...