parcel: Hot module reloading no longer working

🐛 bug report

I upgraded from v1.11.0 to v1.12.3 and hot module reloading is no longer working. Whenever I make a change to one of my React components, it will trigger a rebuild, but then the browser page goes blank. The error in the console is Uncaught SyntaxError: Unexpected end of input, and it looks like the .js file is only partly there. If I manually reload the page everything then works fine until I make another change.

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

package.json

{
    "scripts": {
        "parcel": "./node_modules/parcel-bundler/bin/cli.js",
        "dev:watch": "npm run parcel -- watch frontend/pages/**/*.pug -d frontend/dist/"
    }
}

🤔 Expected Behavior

The page should automatically update with the changes I’ve made

😯 Current Behavior

The page is breaking and I have to manually refresh to get my code changes

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	11.13.0
npm	6.7.0
Operating System	Ubuntu 18.04.2 LTS

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 27
Comments: 22

Commits related to this issue

Pin parcel 1.11 due to HMR bug https://github.com/parcel-bundler/parcel/issues/2894 — committed to okorz001/langquiz-site by okorz001 5 years ago
Emit HMR update after packaging https://github.com/parcel-bundler/parcel/issues/2894 — committed to neftjs/parcel-bundler by KrysKruk 5 years ago

Most upvoted comments

Had the same issue, fixed it, here’s what I did:

yarn add react-hot-loader
add react-hot-loader/babel in .babelrc plugins array (first)
add first line of App.js: import { hot } from ‘react-hot-loader/root’;
modify export of App.js: export default hot(module)(App);

Profit!

Just follow the steps from: https://github.com/gaearon/react-hot-loader/tree/master#getting-started but when using in your app, follow: https://github.com/gaearon/react-hot-loader/tree/master#old-api

+13

vvo on May 22, 2019

Hey folks, I’m experiencing the exact same issue, with exact same versions (although on Mac, unlikely to make any difference). I am also using React (+ TypeScript) and currently emitting a pretty huge bundle.

Taking a look at the code in Bundler.js, it seems strange to me that hmr.emitUpdate is called before the packaging step. It would seem to me that if the packaging step takes a long time for whatever reason (eg. huge bundle…), we hit a race condition where the packaging takes longer than the reload:

https://github.com/parcel-bundler/parcel/blob/master/packages/core/parcel-bundler/src/Bundler.js#L319

I tried just moving the hmr.emitUpdate call after the packaging step - this works fine for the project I’m using it for, but the change seems to break a couple of the HMR tests in parcel-bundler that I don’t really understand unfortunately.

I’ve committed this change here https://github.com/lachenmayer/parcel/commit/cbed7e7f498f6fdfe43653456fc9713c19f2881b

This intuitively seems to be the correct behavior, ie. wait until everything is packaged up & then emit a HMR at the same time (-ish) as the bundled event is emitted. I don’t know if this could have some other impact that I’m not aware of.

Unfortunately I don’t really have the time to dig into this deeper currently, I hope this is useful at least. Thanks a lot!

+10

lachenmayer on May 8, 2019

Are there any updates for this issue? I really would like HMR working … 😦

goranmoomin on Aug 25, 2019

If reloading the full page instead of HMR is an option then the following alleviates the issue.

if (module.hot) {
  module.hot.accept(function () {
    setTimeout(function() {
      location.reload();
    }, 300);
  });
}

brillout on Oct 21, 2019

Also seeing this on Parcel v1.12.3 on my mac. In case it wasn’t clear from the bug report, you can downgrade to v1.11.0 to get this working again: yarn upgrade parcel-bundler@1.11.0

trucklos on Sep 2, 2019

Is there any progress on this issue? Even if it works if you install react-hot-loader. This doesn’t solve the problem itself. If the solution of @lachenmayer is working is anyone going to merge his change?

mrukas on Jun 25, 2019