search

nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.58k stars 2.36k forks source link

HMR fails after upgrade to NX 16+ and Webpack 5+ #18424

Closed joshuaPSmith closed 4 months ago

joshuaPSmith commented 1 year ago

Current Behavior

I get my log that hmr is enabled here:


But then when I make changes to my app I get the following and the entire app reloads:
```log.js:41 [HMR] Cannot apply update. Need to do a full reload!

log.js:41 [HMR] Error: Aborted because 12630 is not accepted
Update propagation: 12630` (stripped out the paths for readability. 

### Expected Behavior

The expectation is that I can make changes without an app reload. 

### GitHub Repo

_No response_

### Steps to Reproduce

1. Have project setup similar to what I have outlined
2. Run npm serve for the react app.
3. Make a change in a module with the app running in the browser.
4.

### Nx Report

```shell
Node   : 20.5.0
   OS     : win32-x64
   npm    : 9.8.0

   nx (global)             : 16.6.0
   nx                      : 16.6.0
   @nx/js                  : 16.6.0
   @nx/jest                : 16.6.0
   @nx/linter              : 16.6.0
   @nx/workspace           : 16.6.0
   @nx/cypress             : 16.6.0
   @nx/devkit              : 16.6.0
   @nrwl/eslint-plugin-nx  : 16.6.0
   @nx/react               : 16.6.0
   @nrwl/tao               : 16.6.0
   @nx/web                 : 16.6.0
   @nx/webpack             : 16.6.0
   typescript              : 5.1.6
   ---------------------------------------
   Community plugins:
   @jscutlery/semver : 3.1.0

Failure Logs

log.js:41 [HMR] Cannot apply update. Need to do a full reload!
module.exports @ log.js:41
(anonymous) @ dev-server.js:48
Promise.catch (async)
check @ dev-server.js:45
(anonymous) @ dev-server.js:69
emit @ events.js:153
reloadApp @ reloadApp.js:38
ok @ index.js:227
(anonymous) @ socket.js:62
client.onmessage @ WebSocketClient.js:45
log.js:41 [HMR] Error: Aborted because 12630 is not accepted
Update propagation: 12630
    at applyHandler (http://localhost:4200/runtime.js:901:31)
    at http://localhost:4200/runtime.js:522:21
    at Array.map (<anonymous>)
    at internalApply (http://localhost:4200/runtime.js:521:54)
    at http://localhost:4200/runtime.js:491:26
    at waitForBlockingPromises (http://localhost:4200/runtime.js:445:48)
    at http://localhost:4200/runtime.js:489:24

Operating System

Additional Information

Here is my project.json:


  "name": "db-web",
  "$schema": "..\\..\\node_modules\\nx\\schemas\\project-schema.json",
  "sourceRoot": "apps/db-web/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",
        "outputPath": "public/",
        "index": "apps/db-web/src/index.html",
        "baseHref": "/",
        "main": "apps/db-web/src/root.tsx",
        "polyfills": "apps/db-web/src/polyfills.ts",
        "tsConfig": "apps/db-web/tsconfig.app.json",
        "assets": [
          "apps/db-web/src/favicon.ico",
          "apps/db-web/src/assets",
          "apps/db-web/src/manifest.json"
        ],
        "styles": ["apps/db-web/src/styles.scss"],
        "scripts": []
      },
      "configurations": {
        "local": {
          "fileReplacements": [],
          "liveReload": true,
          "extractLicenses": false,
          "outputHashing": "none",
          "optimization": false,
          "sourceMap": true,
          "vendorChunk": true,
          "namedChunks": true
        },
        "development": {
          "fileReplacements": [
            {
              "replace": "apps/db-web/src/environments/environment.local.dev.ts",
              "with": "apps/db-web/src/environments/environment.dev.ts"
            }
          ],
          "extractLicenses": true,
          "optimization": true,
          "outputHashing": "none",
          "sourceMap": true,
          "namedChunks": false,
          "vendorChunk": false
        },
        "production": {
          "fileReplacements": [
            {
              "replace": "apps/db-web/src/environments/environment.local.dev.ts",
              "with": "apps/db-web/src/environments/environment.prod.ts"
            }
          ],
          "extractLicenses": true,
          "optimization": true,
          "outputHashing": "none",
          "sourceMap": true,
          "namedChunks": false,
          "vendorChunk": false
        }
      }
    },
    "serve": {
      "executor": "@nx/webpack:dev-server",
      "defaultConfiguration": "local",
      "options": {
        "buildTarget": "db-web:build",
        "hot": true,
        "hmr": true,
        "liveReload": false,
        "webpackConfig": "./webpack.config.js"
      },
      "configurations": {
        "local": {
          "buildTarget": "db-web:build:local"
        },
        "development": {
          "buildTarget": "db-web:build:development"
        },
        "production": {
          "buildTarget": "db-web:build:production",
          "hmr": false
        }
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/db-web/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/apps/db-web"],
      "options": {
        "jestConfig": "apps/db-web/jest.config.ts",
        "passWithNoTests": true
      }
    },
    "version": {
      "executor": "@jscutlery/semver:version",
      "options": {
        "preset": "conventional"
      }
    }
  },
  "tags": []
}

Here is webpack config:
```const { composePlugins, withNx } = require('@nx/webpack');

module.exports = composePlugins(withNx(), (config, { options, context }) => {
  // customize webpack config here
  return config;
});

Dependencies from package.json
```"dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.5",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@mui/material": "^5.14.3",
    "@nx/cypress": "16.6.0",
    "@rollbar/react": "^0.11.2",
    "@tanstack/match-sorter-utils": "^8.8.4",
    "@tanstack/react-table": "^8.9.3",
    "@types/react-datepicker": "^4.15.0",
    "axios": "^1.4.0",
    "core-js": "^3.32.0",
    "firebase": "^10.1.0",
    "firebase-functions": "^4.4.1",
    "lottie-react": "^2.4.0",
    "luxon": "^3.3.0",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.43",
    "node-sass": "^9.0.0",
    "notistack": "^3.0.1",
    "react": "18.2.0",
    "react-confetti": "^6.1.0",
    "react-datepicker": "^4.16.0",
    "react-device-detect": "^2.2.3",
    "react-dom": "18.2.0",
    "react-draggable": "^4.4.5",
    "react-horizontal-scrolling-menu": "^4.1.0",
    "react-moment": "^1.1.3",
    "react-reorder": "^3.0.0-alpha.7",
    "react-router-dom": "^6.14.2",
    "react-toggle": "^4.1.3",
    "react-tournament-bracket": "^0.2.4",
    "react-twitter-widgets": "^1.11.0",
    "regenerator-runtime": "0.13.11",
    "rollbar": "^2.26.2",
    "swiper": "^10.1.0",
    "tslib": "^2.6.1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-env": "^7.22.9",
    "@babel/preset-react": "^7.22.5",
    "@badeball/cypress-cucumber-preprocessor": "^18.0.2",
    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
    "@commitlint/cli": "^17.6.7",
    "@commitlint/config-conventional": "^17.6.7",
    "@jscutlery/semver": "^3.1.0",
    "@nrwl/eslint-plugin-nx": "16.6.0",
    "@nx/jest": "16.6.0",
    "@nx/linter": "16.6.0",
    "@nx/react": "16.6.0",
    "@nx/web": "16.6.0",
    "@nx/webpack": "16.6.0",
    "@nx/workspace": "16.6.0",
    "@testing-library/react": "14.0.0",
    "@types/jest": "29.5.3",
    "@types/luxon": "^3.3.1",
    "@types/node": "20.4.5",
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.7",
    "@types/react-toggle": "^4.0.3",
    "@types/webpack-env": "^1.18.1",
    "@typescript-eslint/eslint-plugin": "~6.2.1",
    "@typescript-eslint/parser": "~6.2.1",
    "autoprefixer": "^10.4.14",
    "babel-jest": "29.6.2",
    "chance": "^1.1.11",
    "cy-verify-downloads": "^0.1.15",
    "cypress": "^12.17.2",
    "cypress-cucumber-preprocessor": "^4.3.1",
    "cypress-file-upload": "^5.0.8",
    "cypress-iframe": "^1.0.1",
    "cypress-mochawesome-reporter": "^3.5.1",
    "cypress-multi-reporters": "^1.6.3",
    "cypress-parallel": "^0.13.0",
    "esbuild": "^0.18.17",
    "eslint": "~8.46.0",
    "eslint-config-prettier": "8.9.0",
    "eslint-plugin-cypress": "^2.13.3",
    "eslint-plugin-import": "2.28.0",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-react": "7.33.1",
    "eslint-plugin-react-hooks": "4.6.0",
    "husky": "^8.0.3",
    "jest": "29.6.2",
    "mochawesome": "^7.1.3",
    "mochawesome-merge": "^4.3.0",
    "nx": "16.6.0",
    "nyc": "^15.1.0",
    "postcss": "^8.4.27",
    "prettier": "^3.0.0",
    "react-refresh": "^0.14.0",
    "react-test-renderer": "18.2.0",
    "tailwindcss": "^3.3.3",
    "ts-jest": "29.1.1",
    "ts-node": "10.9.1",
    "typescript": "~5.1.6",
    "webpack": "^5.88.2",
    "webpack-dev-server": "^4.15.1"
  }
}
SunStupic commented 11 months ago

@joshuaPSmith Did you solve this issue or find any workaround?

joshuaPSmith commented 11 months ago

@joshuaPSmith Did you solve this issue or find any workaround?

I have not. I need to do updates and see if anything has changed since I last checked this.

ndcunningham commented 4 months ago

This should be working with the current setup of React using webpack.

Just a note that if you are still using executors hot is not a valid option for @nx/webpack:dev-server.

But the setup should work once the options passed are also as expected.

github-actions[bot] commented 3 months ago

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.