Parcel: Hot module reloading no longer working

[GuyShane]

🐛 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 |

[georgeot]

The issue happens only when using React. It could be related to the bundle size being big.

After page reloads, the JS bundle being loaded seems incomplete, as if the reload happened too soon.

Looking at the terminal output (using log level 4), you can see that the page tries to load JS file before the bundle finished building.

These are all the changes between 1.11.0 and 1.12.0: https://github.com/parcel-bundler/parcel/compare/[email protected]@1.12.0

[okorz001]

Is there any workaround beyond downgrading to ~1.11.0?

[lachenmayer]

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!

[Aaronius]

I'm also having the same issue. My stats:

Parcel: 1.12.3
Node: 10.15.3
npm: 6.4.1
Operating System: Mac Mojave

[vvo]

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

[reeversedev]

@vvo It worked like a charm!

Thanks for sharing.

[mrukas]

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?

[mikhailrojo]

the same

[boazblake]

works on my pc but not on my mac

[pcr910303]

Are there any updates for this issue? I really would like HMR working ... :-(

[trucklos]

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 [email protected]

[tdejager]

I've also downgraded to 1.11.0, which seems to work quite well :+1:, will this be fixed in a future version :)?

[coder82]

Pls fix :D

[brillout]

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

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

[dvdvdmt]

The fix provided by @lachenmayer is working. Are there any other problems in solving this issue? And why is the solution did not accepted for such a long time?

[iamnimnul]

The fix provided by @lachenmayer is working. Are there any other problems in solving this issue? And why is the solution did not accepted for such a long time?

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

this might be one of the reasons

[frvannes16]

Has anybody been able to discover a solution that also covers Vue components? I am seeing the same occasional failure of the hot reload feature while building an app that exclusively uses Vue.js . For that, the earlier suggestions don't seem to apply.

Has anybody experienced this on Vue as well?

[willnix86]

+1 for this

[IlmariKu]

Experiencing the same issue as well. Fixed the issue by downgrading Parcel to 11.1.0, but not very sustained solution

React
Node: v13.10.1
OS: MacOS Catalina 10.15.3

[anulaibar]

I'm also having this issue - npm i -D [email protected] - solved the issue.

I have the following in my package.json.

  "scripts": {
    "dev": "node run-devServer.js",
    "build": "parcel build index.html",
    "start": "node server.js",
  },

run-devServer.js

const proxy = require("http-proxy-middleware");
const Bundler = require("parcel-bundler");
const express = require("express");

const options = { cache: false };
const bundler = new Bundler("index.html", options);

const app = express();
const PORT = process.env.PORT || 1234;

app.use(
  "/api/**",
  proxy({
    target: "http://localhost:3000"
  })
);

app.use(bundler.middleware());
app.listen(PORT);

[Sleepful]

yarn add -D [email protected] did it for me too. This keeps a "parcel": "^1.12.x" dependency but adds the downgraded bundler.