Getting HMR / Fast Refresh to work on old browsers with create-react-app v4
Looking for the quick solution? Go to the TL;DR!
Last week, I discovered an old iPad 2 lying around. Also being the proud owner of a 3D printer, I quickly printed a holder for my wall and placed the iPad in there. Good! Now, let’s create a web-app for it so I can make a nice wall display, displaying whatever I want.
So, naturally, I ran
yarn create react-app ipad-wall (equivalent of
npx create-react-app ipad-wall) and began writing some code. After a short 5 minutes, I wanted to see it run on the iPad, so I pointed Safari to my local IP. But there I was met with a white screen…
My first thought was that I should edit the
browserslist section of
"not op_mini all",
"not op_mini all",
After re-running the dev server (
yarn start), and refreshing the iPad… still a white screen. All right, time to get out the debugging tools…
The error that my iPad gave me confused me for a while:
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode. (main.chunk.js:216)
I thought we even defined “iOS 9” in “development” to browserslist? Looking at
main.chunk.js, we find the following chunk of code:
const isHotUpdate = !!module.hot.data;
const prevExports = isHotUpdate ? module.hot.data.prevExports : null;
const declarations doing there?!
Well, I’m here to tell you.
As it turns out, this part of the code is hot-injected into the page at runtime and thus are not transpiled by babel / browserslist.
There currently is an issue for this in the corresponding plugin (@pmmmwh/react-refresh-webpack-plugin) over here: https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/297, but there doesn’t seem to be much going on at the moment.
So, I took it upon myself to try and fix this. My solution was as follows:
- I forked the original repository of react-refresh-webpack-plugin
- I created a commit that converts the offending file (loader/RefreshModule.runtime.js) to ES5-compatible code
- I added the following to my
- I removed
yarnagain to fetch the packages, but this time substituting the original package for my own one
- No more error! Fast Refresh (aka Hot Module Reloading / HMR) works again!
If you want to quickly solve this issue for yourself, add the following to your
node_modules and re-install.
resolutions entry in
package.json is only supported in
yarn as far as I know. There is a PR for this for npm (https://github.com/npm/rfcs/pull/129), but I’m unsure of the progress. Manually modifiying
package-lock.json might be a semi-solution.