HMR won't work in v2 beta3.1

[Darhagonable]

🐛 bug report

HMR isn't working since updating to v2 beta 3.1

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc :

{
  "plugins": [
    ["module:kremling-babel-plugin", {
      "namespace": "scope",
      "sassOptions": {}
    }]
  ]
}

package,json :

{
  "name": "projectize",
  "description": "Project Oriented Browsing",
  "version": "1.0.0",
  "license": "MIT",
  "targets": {
    "webext-dev": {
      "sourceMap": {
        "inline": true,
        "inlineSources": true
      }
    },
    "webext-prod": {}
  },
  "scripts": {
    "start": "parcel src/manifest.json --host localhost --target webext-dev",
    "build": "parcel build src/manifest.json --target webext-prod"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webextension-polyfill": "^0.8.0",
    "kremling": "^2.0.4",
    "kremling-babel-plugin": "^1.0.0",
    "prop-types": "15.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.13.16",
    "parcel": "2.0.0-beta.3.1",
    "@parcel/core": "2.0.0-beta.3.1",
    "@parcel/config-webextension": "2.0.0-beta.3.1",
    "@parcel/transformer-sass": "2.0.0-beta.3.1"
  }
}

🤔 Expected Behavior

HMR to work and no errors to appear in the console

😯 Current Behavior

🔦 Context

I just updated my project to use v2 beta3.1 and noticed HMR isn't working and I am getting errors in the console.

💻 Code Sample

https://github.com/Darhagonable/Projectize/tree/parcel-react-ext

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.3.1
Node	v15.3.0
Yarn	1.22.10
Operating System	Windows 10 Version 10.0.19042 Build 19042

[azzamsa]

Same here. For now I need to pass --no-hmr to continue my work.

> parcel watch 'src/styles/main.scss' --dist-dir 'dist/styles' --public-url './'


> foo@4.7.4 dev:scripts
> parcel watch 'src/scripts/main.js' --dist-dir 'dist/scripts'

AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:

  (0, _assert().default)(typeof address === 'object' && address != null)

    at HMRServer.start (foo/node_modules/@parcel/reporter-dev-server/lib/HMRServer.js:69:27)
    at Object.report (foo/node_modules/@parcel/reporter-dev-server/lib/ServerReporter.js:106:23)
    at ReporterRunner.report (foo/node_modules/@parcel/core/lib/ReporterRunner.js:140:31)
    at async Parcel.watch (foo/node_modules/@parcel/core/lib/Parcel.js:571:7)
    at async run (foo/node_modules/parcel/lib/cli.js:342:9) {
  generatedMessage: true,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}
foo/node_modules/@parcel/reporter-dev-server/lib/HMRServer.js:148
    this.options.logger.warn({
                        ^

TypeError: Cannot read property 'warn' of undefined
    at WebSocketServer.handleSocketError (foo/node_modules/@parcel/reporter-dev-server/lib/HMRServer.js:148:25)
    at WebSocketServer.emit (events.js:315:20)
    at Server.emit (events.js:315:20)
    at emitErrorNT (net.js:1345:8)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
⠸ Building index.js...

[dguo]

I ran into the same issue with 2.0.0-beta.3.1 and downgraded to 2.0.0-beta.2 (for both parcel and @parcel/config-webextension) to get HMR to work.

[mischnic]

Can anyone provide a reproduction for that (0, _assert().default)(typeof address === 'object' && address != null) or Cannot read property 'warn' of undefined error?

[danieltroger]

For me it was a too low port (<1024 I believe) or permission problem.

I used to use yarn run serve --port 1234 --hmr-port 443 --host localhost

which says

daniel@iMac:/tmp/parcel-infinity-loops$ yarn run serve  --port 1234 --hmr-port 443 --host localhost
yarn run v1.22.10
warning package.json: No license field
$ parcel serve --port 1234 src/main.ts --port 1234 --hmr-port 443 --host localhost
AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:

  (0, _assert().default)(typeof address === 'object' && address != null)

    at HMRServer.start (/private/tmp/parcel-infinity-loops/node_modules/@parcel/reporter-dev-server/lib/HMRServer.js:69:27)
    at Object.report (/private/tmp/parcel-infinity-loops/node_modules/@parcel/reporter-dev-server/lib/ServerReporter.js:106:23)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async ReporterRunner.report (/private/tmp/parcel-infinity-loops/node_modules/@parcel/core/lib/ReporterRunner.js:147:9)
    at async Parcel.watch (/private/tmp/parcel-infinity-loops/node_modules/@parcel/core/lib/Parcel.js:544:7)
    at async run (/private/tmp/parcel-infinity-loops/node_modules/parcel/lib/cli.js:342:9) {
  generatedMessage: true,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}
/private/tmp/parcel-infinity-loops/node_modules/@parcel/reporter-dev-server/lib/HMRServer.js:148
    this.options.logger.warn({
                        ^

TypeError: Cannot read property 'warn' of undefined
    at WebSocketServer.handleSocketError (/private/tmp/parcel-infinity-loops/node_modules/@parcel/reporter-dev-server/lib/HMRServer.js:148:25)
    at WebSocketServer.emit (node:events:365:28)
    at Server.emit (node:events:365:28)
    at emitErrorNT (node:net:1333:8)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
error Command failed with exit code 1.

but yarn run serve --port 1234 --hmr-port 4326 --host localhost works.

(No error with macOS 10.15, but fails with <=10.14 or Linux)

[devongovett]

Was that the issue for anyone else? If that's the case it doesn't really make sense to me that downgrading to beta 2 would solve it.

[Darhagonable]

Yes changing ports seem to fix it. Did beta 3 change the default ports or something?

[devongovett]

Not that I am aware of. The default port is still 1234.

[basher]

I'm having the same problem with Parcel 2.0.0-rc.0, with errors as described in the current behaviour screenshot above.

I did a fresh NPM install, having been using Parcel 2.0.0-nightly.400 for nearly a year.

• In my local DEV environment, I use Parcel to serve CSS/JS via port 1234.
• I consume these bundled assets in Storybook running on port 9009, running from a separate Git repo.
• I also consume assets in a local .Net environment running on port 61805.

I tried setting --hmr-port 9009 or --hmr-port 61805 in Parcel, but same errors persist.

I've now disabled HMR with --no-hmr.

[danieltroger]

@basher have you tried running parcel as root/admin?

[basher]

@danieltroger I just tried... makes no difference.

Btw, I use terminal window inside VSCode, so I opened VSCode as Admin.

Not sure why I would need to do this as I can install packages, etc, and HMR worked in nightly 400.

[basher]

I can reproduce the issue with a minimal test case, but I can also get HMR working with 1 scenario.

Clone my Parcel 2 RC0 test repo

• npm run start:html to open index.html in browser.
• HMR works fine in this scenario, where I'm running the website locally from the same repo as Parcel.

Now clone my Storybook HTML test repo

• npm run storybook.
• I get the HMR errors as detailed above.
• This repo simply links to the Parcel-bundled localhost:1234//index.css and localhost:1234//index.js files from the 1st repo.
• I also get the HMR errors when running my local .NET DEV environment, which also links to the Parcel-bundled resources.
• These issues did not happen when running a previous Parcel 2 nightly version.
  • To clarify... HMR did not actually work (I had to reload pages in Storybook or .NET to pick up CSS/JS changes) but I did NOT get any HMR console errors.