HMR Not working in Build an Epic React App workshop

[jkmuka]

In exercise 1 noticed that HMR is not working. Using Chrome I can see HMR is waiting for updates but even a simple text change does not get picked up without refreshing the page. Also, this seems to only be an issue with this workshop. Other workshops and even a new CRA HMR seems to work fine

[HMR] Waiting for update signal from WDS...

[kentcdodds]

Hmm.... I can't reproduce. It works fine for me:

🤔

[jkmuka]

FWIW, I setup a completely new CRA and manually added the exercises and HMR works fine there, just in the workshop setup it's not working. I might blow away the workshop files and do the setup over again to see if it starts working after that.

[kentcdodds]

Ok, thanks for the investigation @jkmuka!

[michaljuris]

Hot reloading doesn't work for me as well. I've just cloned the repo, checked out the exercises/01-bootstrap branch (using node go) and simply modified the index.exercise.js with the solution.

After the first file save, while an application is running in the browser, hot reload files are downloaded , but the DOM is not modified:

Any other consequent file save is not reflected in the browser at all. The dev server rebuilds without an error each time though.

Tested in Chrome 87 (normal and incognito windows) and Safari 14.0
Node 12.18.3
Bookshelf app SHA - 65f7843

index.exercise.js:

import ReactDOM from 'react-dom'

import {Logo} from 'components/logo'
function App() {
  return (
    <>
      <Logo />
      <h1>Bookshelf</h1>
      <button onClick={e => console.log('Login')}>Login</button>
      <button onClick={e => console.log('Register')}>Registersss</button>
    </>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))```

[kentcdodds]

Oh, one thing to keep in mind, Webpack doesn't like files being added/removed while it's running. So you need to make sure to restart the server each time you change the exercise. Is that the problem?

[michaljuris]

I've restarted the dev several times without changing the branch/exercise (actually the first thing I've tried 😉 )

[kentcdodds]

Just tried on that first exercise and I was able to reproduce it. It looks like HMR starts working on exercise 3. So 1 and 2 it doesn't work. I'm not sure what the problem could be though 🙃

[michaljuris]

It's not a biggie for me. I was just curious if it is just me or not. Thx for looking into it!

[andresgallego]

Adding FAST_REFRESH=false to the .env file fixed the problem to me.

[kentcdodds]

Thank you for the working workaround @andresgallego! I've added that to both exercise 1 and 2 so people won't bump into this anymore.

I may actually end up adding that to every workshop/exercise because in the context of workshops fast refresh can often not be trusted...

Anyway, thanks!

[kentcdodds]

@all-contributors please add @andresgallego for ideas

[allcontributors]

@kentcdodds

I've put up a pull request to add @andresgallego! 🎉

[kentcdodds]

@all-contributors please add @michaljuris for bugs

[allcontributors]

@kentcdodds

I've put up a pull request to add @michaljuris! 🎉

[kentcdodds]

@all-contributors please add @jkmuka for bugs

[allcontributors]

@kentcdodds

I've put up a pull request to add @jkmuka! 🎉