nx: HMR super slow with React project since 15.6.0

We’ll patch it for 15.6 and it’ll be in the next 15.7 release as well.

I’ll look into it. The problem could be the wrong env being set in the executor.

After updating from 15.4.2 to 15.6.2 I can confirm the exact behavior of not having the NODE_ENV set. Of course, it can be set manually, but, I would say, this is a regression in previously working behavior.

Also, for me, this version either changes nothing, since with the extended webpack config, the full-page-reload occurs, instead of HMR.

I think I maybe figured what is the root cause when I noticed my ReactQuery DevTools not showing up:

The process.env.NODE_ENV is undefined, which leads to HMR being disabled as it is running in production mode. That is maybe why everything is so slow. Possibly other env variables are also undefined, haven’t checked.

Edit: there is already an issue about this #14547

We are experiencing this issue too in 15.6.3

Workaround, add in workspace root .local.env with NODE_ENV=development

This doesn’t work for me. Every time I try to add NODE_ENV, either via env file or directly in the script call like NODE_ENV=development nx serve app or cross-env NODE_ENV=development nx serve app (as suggested by @PointSingularity), it unsets the variable again and doesn’t reach the React app. Any ideas why this could happen? I’m using 15.6.2, but also tried with 15.4.6 (first version introducing the problem with NODE_ENV resolving to undefined in React) and other 15.5.x versions and still no effect.

For context, I’m using the following config in project.json for the serve and build commands (none get the NODE_ENV var in the above versions, unlike in version <= 15.4.5 where it works):

    "build": {
      "executor": "@nrwl/webpack:webpack",
      "options": {
        "outputPath": "dist/apps/app",
        "index": "apps/app/src/index.html",
        "main": "apps/app/src/main.tsx",
        "polyfills": "apps/app/src/polyfills.ts",
        "tsConfig": "apps/app/tsconfig.app.json",
        "assets": ["apps/app/src/favicon.ico", "apps/app/src/assets"],
        "styles": [],
        "scripts": [],
        "webpackConfig": "apps/app/webpack.config.js",
        "skipNxCache": true
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "apps/app/src/environments/environment.ts",
              "with": "apps/app/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            }
          ]
        }
      },
      "outputs": ["{options.outputPath}"]
    },
    "serve": {
      "executor": "@nrwl/webpack:dev-server",
      "options": {
        "buildTarget": "app:build"
      },
      "configurations": {
        "production": {
          "buildTarget": "app:build:production"
        },
        "development": {
          "buildTarget": "app:build:development"
        }
      },
      "defaultConfiguration": "development"
    },

After updating from 15.4.2 to 15.6.2 I can confirm the exact behavior of not having the NODE_ENV set. Of course, it can be set manually, but, I would say, this is a regression in previously working behavior.

Also, for me, this version either changes nothing, since with the extended webpack config, the full-page-reload occurs, instead of HMR.

@nemonemi - I had this same issue, but setting NODE_ENV and updating my custom webpack config to follow the new example in https://nx.dev/packages/webpack/documents/webpack-config-setup#configure-webpack-for-react-projects fixed it.

Side note for anyone that cares, I only have a custom webpack conf to add fallbacks for nodejs core modules since 15.4.6 also removed the polyfills that had been included. I get that that makes it consistent with what webpack 5 does, but it was a breaking change included in a patch version release.

I think I maybe figured what is the root cause when I noticed my ReactQuery DevTools not showing up:

The process.env.NODE_ENV is undefined, which leads to HMR being disabled as it is running in production mode. That is maybe why everything is so slow.

Edit: there is already an issue about this #14547

Thanks for the hint. I was able to manually set the development variable in our package.json start script and HMR is behaving as expected. Good workaround for the time being.

package.json

{
  "scripts": {
    "start": "cross-env NODE_ENV=development nx serve our-app"
    ...
  }
}

Yes I saw that, and I understand that it could be an interesting lead, but I have not touched anything webpack related in my project… Let’s see if other people get the same issue after migrating, for now, I postponed a little bit our migration. If you want I try anything else tell me and I will!

Have the same issue. The webpack config is the default one.