Parcel: Hot Module Reloading not working, dev server not being updated.

Created on 20 Jun 2018  ยท  52Comments  ยท  Source: parcel-bundler/parcel

๐Ÿ› bug report

I followed the steps exactly here: https://parceljs.org/getting_started.html
Making changes to either the js or html file does not cause any update to occur at localhost:1234 when parcel index.html is run.

I also followed the react recipe verbatim with the same issue: http://blog.jakoblind.no/react-parcel/
Saving the file doesn't refresh the dev server.

๐ŸŽ› Configuration (.babelrc, package.json, cli command)

package.json

{
  "name": "parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "parcel-bundler": "^1.9.2"
  }
}

.babelrc

{
    "presets": [
        "env",
        "react"
    ]
}

console command

npm start
also tried parcel serve index.html and parcel index.html --no-cache

๐Ÿค” Expected Behavior

Saved changes should cause the dev server to refresh

๐Ÿ˜ฏ Current Behavior

Content builds correctly when the command is first run however, the dev server is not refreshed when a change is saved, so even refreshing the page doesn't do anything.

๐Ÿ”ฆ Context

I tried using global parcel-bundler as well as a local installation.

๐Ÿ’ป Code Sample

Followed the get started guide and react-recipe blog exactly.

index.html

<!DOCTYPE html>
<html>

<head>
    <title>React starter app</title>
</head>
<body>
    <div id="app"></div>
    <script src="index.js"></script>
</body>
</html>

index.js

import React from "react";
import ReactDOM from "react-dom";

class HelloMessage extends React.Component {
  render() {
    return <div>Hlo{this.props.name + this.props.name}</div>;
  }
}

var mountNode = document.getElementById("app");
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);

๐ŸŒ Your Environment

Tried in chrome as well as firefox

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.2
| Node | 8.11.3
| npm/Yarn | 5.6.0
| Operating System | Mac
| Firefox Dev edition | 62.0b1
| Chrome | 67.0.3396.87

Bug

Most helpful comment

Thanks @Michael-N :)
Removing the periods in the containing folder fixed this problem for me, I just replaced them with hyphens. Renamed folder from hrafnkellbaldurs.github.io to hrafnkellbaldurs-github-io.
I also noticed that it wasn't just the containing folder that I had to remove periods from. Any parent folders that had periods had to be renamed as well.

All 52 comments

Safe write issue? https://parceljs.org/hmr.html#safe-write

@DeMoorJasper I'm using VS Code which doesn't have safe write functionality. https://github.com/Microsoft/vscode/issues/28927

So I have no clue what happened, but I was having the same issue with a separate project that uses create-react-app. Restarting my computer fixed the problem. ๐Ÿคทโ€โ™‚๏ธ

I've been seeing reports of this on Freenode, and had it happen a couple times myself. In particular, this bug chased away a user from Parcel entirely today. I think it happens on certain first runs. I was able to reproduce it once with their code, but not consistently. There is a problem here, so it would be great to re-open.

The specific code failed was index.html and src/app.js with this content:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parcel Demo</title>
</head>
<body>
    <div id="main">Hello</div>
    <script src="./src/app.js"></script>
</body>
</html>

src/app.js:

import $ from 'jquery';

$(() => {
  $('#main').text('Hello 123');
});

I dropped those into a folder which had parcel install and ran it (but I think I may have tried to run it with the app.js file in root first?) and it reproduced, with changes to app.js not causing rebuilds, even after killing and restarting the parcel process (run with npx parcel index.html).

It seems to have happened more when changing a script src is involved at some point. It also seems like once it goes away, it doesn't tend to come back in that project. Unfortunately, I wasn't able to get feedback from the user whether deleting .cache fixed it or not. Deleting the .cache folder doesn't not seem to be enough to get the issue to come back.

I'm having the same problem and this is like 5th time I'm trying Parcel over last 6 months or so and I just can't get Parcel to refresh the page, it rebuilds but doesn't refresh. I'm on Windows, using TypeScript and the issue persists no matter the browser (I tried Chrome, Firefox and Opera). Really annoying.

I believe I have been having the same problem... Safe write was not the error for me. I can confirm what @samsch said It also seems like once it goes away, it doesn't tend to come back in that project.. However if I rename the containing folder, parcel will no longer detect watch changes, even after restarting the parcel build while the folder name change is in effect. I tried using the api to ensure the correct dir is passed and the problem above still persists. Deleting .cache was not enough to fix it for me. Any help is appreciated. Thanks!

__EDIT__

  • When I cloned my repo, it named the folder Michael-N.github.io. I removed the periods in the folder name and it all began working. Removing the periods fixed it for me.
  • I don't know if this is replicable but I hope it might help someone else.

Same problem but since 1.9.5.. 1.9.4 it's ok!

Thanks @Michael-N :)
Removing the periods in the containing folder fixed this problem for me, I just replaced them with hyphens. Renamed folder from hrafnkellbaldurs.github.io to hrafnkellbaldurs-github-io.
I also noticed that it wasn't just the containing folder that I had to remove periods from. Any parent folders that had periods had to be renamed as well.

I am also experiencing this issue. Using VSCode (no safe-write). Don't have any odd folder names and 1.9.4 doesn't behave any differently.

Same problem here! Using atom or any other text editor, the css does not get applied just by changing a css property.

I'm using post css + css modules

@DeMoorJasper Can we re-open this issue? The presence of periods in any parent folder breaks watch like @hrafnkellbaldurs pointed out.

Can confirm, this was driving me crazy, replacing the periods from the root folder fixed it.

@mixedCase Hey mate, would you mind posting how the code was, and how it looks like now for the affected files?

@caiokoiti Same code. I merely renamed folder containing the repository from com.domain.subdomain to com-domain-subdomain.

Just quickly adding that periods in my directory name was causing Parcel to ignore hot reloads. (windows 10, VS Code)

I think there are two overlapping issues here: the period-in-directory one, and the one @gitnix and I are having.

I have no folders with dots anywhere in their names, and I'm getting super inconsistent reloading across my and my coworkers' machines.

Anecdotally, I think it fixes itself if we delete the dist and .cache folders and restart the server. It's happening so inconsistently that it's hard to know for sure though.

Same problem, created a new project based off an old (fully HMR working) project. Super bare bones and minimal, but HMR only works on the top level of a react-router based project. Child routes simply won't reload. Restarted, no periods, can open the other project and everything works perfectly, but not this one that is a copy of it... :(

Tried the above delete dist and .cache, restart, no luck either.

Ok, found my problem, possibly @j0hnm4r5 's as well...

Turns out when I was recreating my project I inadvertently named a folder "C"omponents instead of "components". I was using import {Title} from 'components' but the Title.tsx file lives in the Components folder. The part that really makes this challenging is that everything works correctly, parcel finds the file, loads it, renders it, no linting error, etc. The only thing that doesn't work is hot reloading.

This seems like it should either not work at all (ie Can't find dependency 'Title' in 'components' error) or HMR should be case insenstive. Either way would have helped me pinpoint the problem.

The inconsistent behavior between initial loading and HMR led me downgrading babel to earlier versions, stripping out dependencies, removing plugins etc from .babelrc just to happen to notice the capitol letter after hours of banging my head on the wall.

I am experiencing hot reloading working exactly once, and then never again. It reloads after a single change, but then all following changes do not cause hot reload. I have no directories with periods. Deleting .cache and dist do not work. Restarting did not work.

Windows 10
Parcel version 1.10.3
WebStorm 2018.2
TypeScript

mac , I use dir name upad.gitee , hot reload not work, change name into upad_gitee , hot reload worked

This issue should be reopened... HMR not works on windows, since version 1.9.5 to latest 1.10.3.

This issue has blocked me from adopting Parcel. I am back on Rollup until this issue is resolved.

Just started seeing this issue. Don't think I have any periods in folder names. Parcel just periodically stops reloading on file changes and won't start again until the computer is rebooted. Running on macOS Mojave and vscode. Restarting the app without a computer restart makes me able to see new errors, but I have to restart the app every time I change something to see new issues or compilation.

Does anyone else's issue resolve itself (at least temporarily) if you delete the folder where the compiled output is being put?

Scratch that. On further investigation, it's not resolved by blowing away the files โ€” I believe it resolves itself for me as soon as the code successfully compiles again (that is, until all compilation errors are resolved, refreshing will continue to not work, but after a successful compilation, refreshing starts working again, at least temporarily).

Hey.. I was using vim on my windows machine with:set backupcopy=yesand live reload was working perfectly... but due to some circumstances i had to switch to ubuntu 18.04 and i reinstalled parcel bundler on it with node 8 and it turns out even with :set backupcopy=yes live reload isn't working... later i tried to edit index.html file with sublime text 3 but that didn't worked aswell...

I'm experiencing this issue on macOS 10.14.2 with Atom 1.33.1

Renaming the directory helped to solve the issue for me.
But it took me almost an hour to figure out why it kept failing to work properly.

On a Windows machine, renamed the directory from a PowerShell terminal:

mv .\d2s.github.com\ .\d2s-github-com\

Also renamed the project name similarly from the package.json file.

{
  "name": "d2s-github-com",
  "version": "1.0.0",
  "description": "Website",
  "main": "index.html",
  "license": "UNLICENSED",
  "private": true,
  "devDependencies": {
    "parcel-bundler": "^1.11.0"
  },
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }
}

After that, started the dev task from the command line:

yarn run dev

Finally the HMR works, but would be nice if the original cause for the issue could be fixed somehow.

Same problem of HMR not updating. My solution is not enabling https on the dev server. When I do not use https, HMR works properly. When I run with --https it does not. When I again run, but without --https it works again.

So,
HMR does not work with: parcel src/index.html --out-dir=dev --https --open
HMR does works with parcel src/index.html --out-dir=dev --open

Parcel v1.11.0

# dir structure
src
  index.html
  index.js
  style.scss


# package.json
{
  "name": "parcel-test",
  "version": "1.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "parcel watch src/index.html --out-dir=dev",
    "dev": "parcel src/index.html --out-dir=dev --https --open",
    "build": "parcel build src/index.html --out-dir=dist --public-url=./"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "node-sass": "^4.11.0",
    "parcel": "^1.11.0"
  }
}


# index.js
import './style.scss';
console.log('hello');


# style.scss
body { background: #ff0; }
a { color:#900; }

screenshot 2019-02-04 at 09 30 39
for me it was caused by a typo in the file name. I fixed this, deleted dist/ and .cache and everything works fine.

I am using react / material ui for this project.

same here
in my case, atom doesn't fire HMR event.
but windows default notepad does fire.
is this kind of sign to work with notepad like 1999?

The issue with dotfiles is a configuration issue with fast-glob @DeMoorJasper.

fast-glob always ignores dotfiles and the children of dotfolders unless you explicitly tell it not to.

Where you're calling glob or glob.sync from utils/glob.js to get the entry files/setup the watcher, you need to add:

const options = { dot: true }
glob.sync([...], options)

Was running into this problem on macOS with Visual Studio Code. Deleting .cache and .dist folders didn't help and there were no files with dots when I ran pwd in the terminal.

Turns out parcel really doesn't like document.addEventListener("DOMContentLoaded". Since this event is only triggered on the first load.

So I removed the DOMContentLoaded callback and adjusted the code to work without it, then HMR came back!

Old (Non Working) Setup

<!DOCTYPE html>
<head>
    <script src="./test.tsx"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
import * as React from "react";
import * as ReactDOM from "react-dom";

const App = () => {
    return <div>Hello</div>;
}

document.addEventListener("DOMContentLoaded", () => {
    ReactDOM.render(<App />, document.getElementById("app"));
})

Working Setup

<!DOCTYPE html>
<body>
    <div id="app"></div>
</body>
<script src="./test.tsx"></script>
</html>
import * as React from "react";
import * as ReactDOM from "react-dom";

const App = () => {
    return <div>Hello</div>;
}

ReactDOM.render(<App />, document.getElementById("app"));

Hope that helps!

A discovery that I made was that Parcel HMR is case sensitive to imports. It is obviously a typo error by me, but it might help someone that is also having problems with HMR. I did not get any tsc or tslint errors in vscode and the code runs even though the filename is App.tsx. Changing the import of App to
import { App } from './App' makes HMR work again.

Main.tsx

import React from 'react';
import { render } from 'react-dom';
import rootStore from '/stores';
import { Provider } from 'mobx-react';
import { App } from './app';

const Main = () => {
  return (
    <Provider {...rootStore}> 
      <App />
    </Provider>
  );
}

render(<Main/>, document.getElementById('app'));

App.tsx

import React from 'react';
import AppRouter from './AppRouter';
import { Link,  BrowserRouter as Router } from 'react-router-dom';


export class App extends React.Component {
  public render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li><Link to="/">Start</Link></li>
              <li><Link to="/login">Login</Link></li>
            </ul>
          </nav>
          <AppRouter/>
          <div>Footer</div>
        </div>
      </Router>
    )
  }
}

Running parcel build is also case sensitive on Linux, so it will fail. Works on OSX.

parcel build

I just start to try Parcel. With minimal setup it does not reload as you said, no file names with periods or any typos, just basic html. No reload after changing title below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>Hello</h1>
</body>
</html>

@giray123 Maybe safe write is the cause: https://parceljs.org/hmr.html#safe-write

@giray123 Maybe _safe write_ is the cause: https://parceljs.org/hmr.html#safe-write

I use VSCode, apparently it does not have safe-write functionality, I also tried on Vim. Got the same result.

I am having this issue with Atom, VScode and sublime on the mac - but NOT with windows using VScode

I am experiencing the same issue using VSCode. I am also running parcel within a Vagrant machine. The HMR is not being triggered.

As per @tehfailsafe comment, having the name of the file and the import statement with the same letter capitalisation solved the issue for me.

E.g.:
importing a component like this:
import Button from './button';

Where the actual folder is called /Button (notice the capital B), works on first run but it doesn't after saving the changes.

๐Ÿ™ŒSo making sure the name folder and import have exactly the same name with the same capital letters fixed this issue (for me).

this issue also happens to me on vscode (parcel version 1.12.3).

in my case, it has been solved when I followed the instruction here (trying this might solve)

https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc

Parcel 2 solve this great issue... I have try the alpha version.. It's ok

Parcel 2 solve this great issue... I have try the alpha version.. It's ok

"parcel-bundler": "^1.12.3",

I tried to get hot reloading work properly for whole day already. How do I get the alpha version of parcel 2?

Try:

yarn add parcel@v2

or

npm install parcel@v2

Hi thanks!

Seems like it changed the behaviour so it seems to livereload. But it doesnt take the effects on the css values.

Do I need to remove the parcel-bundler before doing the npm install parcel@v2?

Do I need to remove the parcel-bundler before doing the npm install parcel@v2?

Yes. They both install a CLI command called parcel, so will conflict.

After hours of frustration I started parcel on WSL. Works like a charm :)

This sometimes happens when you have an import like import MyModule from './Module.jsx and then you decide to lowercase file name but forgot to change the import.

I have solved this issue by moving my files under to src directory

HMR refused to work after I removed my index.js file because I no longer needed it. I tried a lot of the things recommended in the comments but nothing worked. As soon as I added index.js back and imported it in index.html, it worked.

I'm on a macbook with vscode and parcel 2

Why is this issue still closed?? HMR is one of the most important features of parcel, and a lot of people are experiencing random problems with super simple projects.

@kennethkeim This is a very old issue. Can you please open a new issue more details? Including your code and the steps to reproduce this?

@mischnic Created a new issue here #5371
Let me know if I missed something. Thanks for your contributions โค๏ธ

Was this page helpful?
0 / 5 - 0 ratings

Related issues

medhatdawoud picture medhatdawoud  ยท  3Comments

Niggler picture Niggler  ยท  3Comments

mnn picture mnn  ยท  3Comments

urbanhop picture urbanhop  ยท  3Comments

dotdash picture dotdash  ยท  3Comments