Nx: HMR for @nrwl/react

[marazz1]

How to enable HMR for @nrwl/react. Is it possible to achieve it without custom webpack.config.json? (Like in Angular)

There should be something in docs for HMR.

In workspace.json "hmr": true

"serve": {
          "builder": "@nrwl/web:dev-server",
          "options": {
            "hmr": true,
            "buildTarget": "testapp:build"
          },
          "configurations": {
            "production": {
              "buildTarget": "testapp:build:production"
            }
          }

Expected Behavior

module.hot should not be undefined

Current Behavior

HMR doesn´t work.

Context

    "@nrwl/cypress": "8.5.1",
    "@nrwl/eslint-plugin-nx": "8.5.1",
    "@nrwl/jest": "8.5.1",
    "@nrwl/react": "8.5.1",
    "@nrwl/web": "8.5.1",
    "@nrwl/workspace": "8.5.1",

[FrozenPandaz]

Hi, sorry about this.

This was mislabeled as stale. We are testing ways to mark _not reproducible_ issues as stale so that we can focus on actionable items but our initial experiment was too broad and unintentionally labeled this issue as stale.

[BigAB]

So, as...

• React-Hot-Loader is expected to be replaced by React Fast Refresh as per https://github.com/gaearon/react-hot-loader
• the RHL readme says "webpack - no support yet"
  
  
  
  • Dan Abramov has indicated that work is already being done to replace RHL with React Fast Refresh in Create React App (which uses webpack) as per https://github.com/facebook/react/issues/16604#issuecomment-609524845 (Apr 5)
  
  

We have decided to wait until there is a webpack solution for React Fast Refresh solution for Webpack and we'll implement HMR for our React projects with that when it arrives

[Hotell]

Makes sense! Thx

[cafesanu]

Hi @BigAB! Seems like webpack is now supported 😄 . Here is a copy-paste of the current state in https://github.com/gaearon/react-hot-loader

• React Native - supports Fast Refresh since 0.61.
• parcel 2 - supports Fast Refresh since alpha 3.
• webpack - supports Fast Refresh using a plugin.
• other bundler - no support yet, use React-Hot-Loader

Thanks!

[R4VANG3R]

Create react app 4.0 now also released with Fast Refresh using this plugin: https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/1

[pitops]

any update on this?

[cafesanu]

@BigAB Wondering if there is any news here? This would be a great improvement for the nrwl react community 🙂

Thanks!