HMR super slow with React project since 15.6.0 #14580

bdebon · 2023-01-24T14:50:00Z

Current Behavior

Up until our last migration to 15.6.0 (we were in 15.5.1), adding a console.log somewhere in the code was compiling in less than a second and was added to our browser project without any refresh.
Since the update to 15.6.0 the compilation takes something like 8s and force a refresh of our browser page.

Expected Behavior

We would like the compilation to take the same time that before the migration and that the page is not "forced-refresh".

Github Repo

https://github.com/Qovery/console

Steps to Reproduce

fetching a branch before the migration (eg: main), rm -rf node_modules yarn.lock && yarn
add a console.log anywhere and see how long the terminal takes to compile
do the same from a branch with the migration on (ex: staging)

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 19.0.1
   OS   : darwin arm64
   yarn : 1.22.17
   
   nx : 15.0.3
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.0.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.0.3
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.0.3
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.0.3
   @nrwl/js : 15.0.3
   @nrwl/linter : 15.1.0
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : 15.0.2
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.0.3
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.0.3
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.0.3
   @nrwl/web : 15.0.3
   @nrwl/webpack : 15.0.3
   @nrwl/workspace : 15.0.3
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

Failure Logs

No response

Additional Information

No response

The text was updated successfully, but these errors were encountered:

nemonemi · 2023-01-25T08:16:06Z

Hi bdebon, do you, by any chance, extend the webpack configuration, in any fashion?

I have noticed the same behavior. Here's the ticket where I've reported it at #13125

bdebon · 2023-01-25T08:22:42Z

Hello @nemonemi, I'm affraid wa have not touched anything about webpack configuration. The only module.exports references in the project I found was about tailwind configurations. We have this babel.config.json at the root of our project but not sure it is what you're mentioning:


module.exports = {
  ...rootMain,
  core: { ...rootMain.core, builder: 'webpack5' },
  stories: [...rootMain.stories, '../src/**/**/*.stories.mdx', '../src/**/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
  staticDirs: ['../src/lib'],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType })
    }

    // add your own webpack tweaks if needed

    return config
  },
}

PointSingularity · 2023-01-25T08:27:32Z

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

nemonemi · 2023-01-25T14:08:29Z

@bdebon, in the example repo, that I've added to my ticket I've showcased how a simple custom Webpack extension breaks the HMR.
When logging the inherited Webpack config:

import { merge } from 'webpack-merge';

module.exports = (config: any) => {
  console.log(config); // I have noticed that HMR comes configured properly as "hot: true", but the HMR, after the merge, doesn't work

  return merge(config, {
    module: {
      rules: [
        {
          test: /\.pdf$/i,
          use: ['file-loader'],
        },
      ],
    },
  });
};

As far as I've observed, the output of the merge does not change the hot: true configuration in any fashion.

bdebon · 2023-01-25T14:17:00Z

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!

PointSingularity · 2023-01-26T10:22:20Z

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

JackMorrissey · 2023-01-26T20:37:38Z

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"
    ...
  }
}

PointSingularity · 2023-01-26T21:00:53Z

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"
    ...
  }
}

@JackMorrissey No problem, glad you found a workaround 👍

nemonemi · 2023-01-27T07:48:15Z

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.

PointSingularity · 2023-01-31T13:44:05Z

Still present as of 15.6.3

Nightbr · 2023-01-31T13:46:13Z

We are experiencing this issue too in 15.6.3

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

bheftel · 2023-02-03T01:07:52Z

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.

cgutierrezpa · 2023-02-05T22:42:54Z

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"
    },

nemonemi · 2023-02-10T12:02:06Z

@bdebon , the suggestion from @bheftel and @jaysoo from my ticket resolved the HMR to start working again, and not to have a hard reload of the screen.
const { withReact } = require('@nrwl/react');

However, as your title says, it is still very slow. It takes around 15 sec for HMR to apply changes.

p.s. I am experiencing this on the v15.4.2.

Node : 16.14.0
OS : linux x64
yarn : 3.3.1

nx : 15.4.2
@nrwl/angular : Not Found
@nrwl/cypress : 15.4.2
@nrwl/detox : Not Found
@nrwl/devkit : 15.4.2
@nrwl/esbuild : Not Found
@nrwl/eslint-plugin-nx : 15.4.2
@nrwl/expo : Not Found
@nrwl/express : Not Found
@nrwl/jest : 15.4.2
@nrwl/js : 15.4.2
@nrwl/linter : 15.4.2
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : 15.4.2
@nrwl/react-native : Not Found
@nrwl/rollup : 15.4.2
@nrwl/schematics : 8.12.11
@nrwl/storybook : 15.4.2
@nrwl/web : 15.4.2
@nrwl/webpack : 15.4.2
@nrwl/workspace : 15.4.2
@nrwl/vite : 15.4.2
typescript : 4.8.4

jaysoo · 2023-02-10T14:37:30Z

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

jaysoo · 2023-02-10T14:55:45Z

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

bdebon · 2023-02-14T13:32:31Z

Thank you so much, guys! I finally made migration this morning, and it worked like a charm! HMR is back and as fast as it used to be!

github-actions · 2023-03-16T15:04:49Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

bdebon added the type: bug label Jan 24, 2023

AgentEnder added the scope: react Issues related to React support for Nx label Jan 24, 2023

cgutierrezpa mentioned this issue Feb 6, 2023

process.env.NODE_ENV is undefined #14547

Closed

nemonemi mentioned this issue Feb 10, 2023

HMR not working - webpack custom config issue v15.4.2 #13125

Closed

jaysoo self-assigned this Feb 10, 2023

jaysoo mentioned this issue Feb 10, 2023

fix(webpack): ensure NODE_ENV is defaulted to development for dev-server, and HMR works #14915

Merged

jaysoo closed this as completed in #14915 Feb 10, 2023

bdebon mentioned this issue Feb 14, 2023

chore(nx): migrate nx to 15.7.0 Qovery/console#496

Merged

4 tasks

github-actions bot added the outdated label Mar 16, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HMR super slow with React project since 15.6.0 #14580

HMR super slow with React project since 15.6.0 #14580

bdebon commented Jan 24, 2023

nemonemi commented Jan 25, 2023

bdebon commented Jan 25, 2023

PointSingularity commented Jan 25, 2023

nemonemi commented Jan 25, 2023 •

edited

Loading

bdebon commented Jan 25, 2023

PointSingularity commented Jan 26, 2023 •

edited

Loading

JackMorrissey commented Jan 26, 2023

PointSingularity commented Jan 26, 2023

nemonemi commented Jan 27, 2023

PointSingularity commented Jan 31, 2023

Nightbr commented Jan 31, 2023

bheftel commented Feb 3, 2023 •

edited

Loading

cgutierrezpa commented Feb 5, 2023 •

edited

Loading

nemonemi commented Feb 10, 2023 •

edited

Loading

jaysoo commented Feb 10, 2023

jaysoo commented Feb 10, 2023

bdebon commented Feb 14, 2023

github-actions bot commented Mar 16, 2023

HMR super slow with React project since 15.6.0 #14580

HMR super slow with React project since 15.6.0 #14580

Comments

bdebon commented Jan 24, 2023

Current Behavior

Expected Behavior

Github Repo

Steps to Reproduce

Nx Report

Failure Logs

Additional Information

nemonemi commented Jan 25, 2023

bdebon commented Jan 25, 2023

PointSingularity commented Jan 25, 2023

nemonemi commented Jan 25, 2023 • edited Loading

bdebon commented Jan 25, 2023

PointSingularity commented Jan 26, 2023 • edited Loading

JackMorrissey commented Jan 26, 2023

PointSingularity commented Jan 26, 2023

nemonemi commented Jan 27, 2023

PointSingularity commented Jan 31, 2023

Nightbr commented Jan 31, 2023

bheftel commented Feb 3, 2023 • edited Loading

cgutierrezpa commented Feb 5, 2023 • edited Loading

nemonemi commented Feb 10, 2023 • edited Loading

jaysoo commented Feb 10, 2023

jaysoo commented Feb 10, 2023

bdebon commented Feb 14, 2023

github-actions bot commented Mar 16, 2023

nemonemi commented Jan 25, 2023 •

edited

Loading

PointSingularity commented Jan 26, 2023 •

edited

Loading

bheftel commented Feb 3, 2023 •

edited

Loading

cgutierrezpa commented Feb 5, 2023 •

edited

Loading

nemonemi commented Feb 10, 2023 •

edited

Loading