Parcel: Parcel without HMR doesn't reload the page

Created on 21 Aug 2018  路  7Comments  路  Source: parcel-bundler/parcel

馃悰 bug report


Parcel with --no-hmr doesn't reload the page after changes in code.

馃帥 Configuration (.babelrc, package.json, cli command)


I'm using only parcel start src/index.html --no-hmr without any configs. And I installed only parcel-bundler, react and react-dom.

馃 Expected Behavior

It should reload the page with updated code.

馃槸 Current Behavior

Nothings reload.

馃拋 Possible Solution

I don't know but it looks like that there is some problem with watcher.

馃敠 Context

I'm trying to develop an app and HMR doesn't work correctly (sometimes I need a full page reload). But parcel without ordinary page reload is currently unusable for me. I tried even --no-cache but that doesn't help.

馃捇 Code Sample

馃實 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.7
| Node | 8.10
| npm/Yarn | 6.1.0/1.9.4
| Operating System | Windows 10 or Linux Kubuntu 18.04

Waiting Question

Most helpful comment

Well that's possible with hmr, not if you disable it.

Add this to the entrypoint (Should also work in browserify, webpack, ...)

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

All 7 comments

Well hmr means hot module reload, so if you disable it you disable the reload capability of parcel...

Not sure if I understand the issue

I thought that you can fully reload the page without HMR (like it's possible in create-react-app).
I'm sorry for my misunderstanding of usage.

Well that's possible with hmr, not if you disable it.

Add this to the entrypoint (Should also work in browserify, webpack, ...)

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

to @DeMoorJasper: Thanks a lot! :slightly_smiling_face:

Maybe it would be good to add some note about the solution of how to develop an app if you accidentally firstly import missing file (which you'll create right after that). Because if you do that than parcel shows an error with an unresolved dependency which doesn't go away even after creating the missing file. I've found only this solution where you must go into some resolved file and resave it (weird if you don't save any changes) so it correctly resolve the dependency.

__Reproducible steps:__

  1. in ./index.js import currently non-existing file with component import MyComponent from './MyComponent';
  2. Parcel shows an error with unresolved dependency (that's true)
  3. create the file with component ./MyComponent.js
  4. Parcel still shows an error (it doesn't notice the newly created file)
  5. go into the ./index.js and press Ctrl + S even if you haven't made any changes (that's weird)
  6. Parcel refreshes without any errors

Feel free to contribute to the docs, they're just markdown file so should be fairly easy https://github.com/parcel-bundler/website

@MatejMazur

I'm not a native English speaker (I am Czech with bad English :smile: ). But I can start the PR if somebody helps and correct my "first shot". :slightly_smiling_face:

But sometimes the hmr decides to reload a sub-module, so the reload function is not called. Is there a way to do a "system wide module.hot.accept"?

Was this page helpful?
0 / 5 - 0 ratings