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

🐛 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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 77 (5 by maintainers)

Links to this issue

javascript - Parcel localhost server not updating - Stack Overflow

Most upvoted comments

I found this broke for me if i had a script tag like

<script src="./index.ts"></script>

But works if i load it as a module

<script type="module" src="./index.ts"></script>

It looks like if i have a non-module script parcel doesn’t inject its bundle of hotreloading stuff

+33

msfeldstein on Nov 11, 2021

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.

+18

hrafnkellbaldurs on Jul 29, 2018

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.

+13

klausbreyer on Feb 4, 2019

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

+11

xmclark on Dec 9, 2018

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

+11

saneef on Oct 3, 2018

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.

+11

Nufflee on Jul 26, 2018

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

+11

vpicone on Jun 20, 2018

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.

+10

Michael-Naguib on Jul 28, 2018

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.

tehfailsafe on Oct 28, 2018

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

xmclark on Nov 25, 2018

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.

samsch on Jul 25, 2018

I tried the solutions mentioned here before i was able to fix this by making my script type=“module” then adding this code to it: if (module.hot) { module.hot.accept(function () { location.reload(); }); }

amgj-dev on Oct 15, 2021

Ok, if anyone else is using Windows + WSL and tearing their heart out because no matter what you do, HMR doesn’t work… the problem is with WSL 2.

Currently, WSL 2 has a number of problems related to files crossing filesystem boundaries (i.e. if your project is actually under Windows but accessible to WSL under /mnt/c/something....

To work around the problem, you can convert your distro back to WSL 1. Open an Administrator command prompt and:

wsl -l to list the distros you have. wsl --set-version DISTRO 1, where DISTRO is the name of your distribution. wsl --shutdown to restart the WSL service.

After this, as if by magic, HMR works again. If anyone has further input on this and a better workaround, I’m all ears.

morphine00 on Jul 13, 2022

If Hot Module Reloading is not working, the problem may relate to the periods (.) of the directories name. We can try to get rid of them.

Consider changing the import statement from relative path to absolute path, and then changeing it back. This magically works for me.

import App from "./App";
import App from "/src/App"

Hongjia-Liu on Apr 19, 2022

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).

juanrules on Aug 15, 2019

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

fabioricali on Dec 9, 2018

I found this broke for me if i had a script tag like
<script src="./index.ts"></script>
But works if i load it as a module
<script type="module" src="./index.ts"></script>
It looks like if i have a non-module script parcel doesn’t inject its bundle of hotreloading stuff

This worked for me, hope works for another person with the issue from now

EnmanuelleAcuna on Apr 3, 2022

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!

only-cliches on Mar 1, 2019

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.

j0hnm4r5 on Oct 25, 2018

I have the same problem. I made a workaround, feel free to use it while it’s not fixed. Steps:

Make a hotreload.js/.ts
Paste this code in it (you’ll have to adapt it a little if you’re using pure js):

export const enableHotReload = () => {
    if (process.env.NODE_ENV === 'development') {
        // Parcel's websocket sends messages every ctrl + s, even though it ONLY works on index.html for now.
        // We'll listen to it to do a whole page refresh.
        const parcelSocket = new WebSocket("ws://localhost:1234/"); // Or whatever port you run parcel on
        parcelSocket.onmessage = () => {
            // eslint-disable-next-line no-restricted-globals
            location.reload();
        };
    }
};

Call enableHotReload(); in your index.tsx just below ReactDOM.render(); and done.

raff-run on Jan 12, 2022

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; }

josfaber on Jan 11, 2019

Using different ports worked for me as described here: https://github.com/parcel-bundler/parcel/issues/6994

nunof07 on Jan 26, 2022

I ran into this problem and it was because I was trying to edit an HTML file without a JS import. I think this should work no matter if you have a JS src tag or not.

lukepighetti on Feb 8, 2021

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

chaaya on Mar 7, 2019

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.

tehfailsafe on Oct 28, 2018

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.

gitnix on Sep 16, 2018

Same problem but since 1.9.5… 1.9.4 it’s ok!

fabioricali on Jul 28, 2018

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. 🤷‍♂️

vpicone on Jun 20, 2018

For me on windows vsCode v1.84 and parcel v2.10.3 in year 2023 helped this:

stop parcel
delete .parcel-cache folder
start parcel again

Gennady-G on Nov 22, 2023

Replying to https://github.com/parcel-bundler/parcel/issues/1591#issuecomment-1183536085 Keeping the Parcel project on the /home/userName path on WSL 2 also seems to solve the issue described by OP.

johanbove on Sep 14, 2022

Hot reload issue solved for me after i added type="module" to my main .js file, now all changes to HTML and JS files are being reflected automatically. parcel -v 2.4.1

alxkkt on Apr 15, 2022

Agree with @GeorgeFlorian, I am also working with Parcel^2.0.1. The changes sometimes don’t reflect in the dist folder when the changes are made in other js files that are imported in the main js file. Can anyone please help with this issue? I tried moving all my files to another newly created folder and npm install on that. The problem remains the same.

A-Spiral-Forge on Jan 7, 2022

I ran into this problem and it was because I was trying to edit an HTML file without a JS import. I think this should work no matter if you have a JS src tag or not.

I solved my issue like that too. I agree it should live reload even if only using html code.

SeniorHangouts on Jul 13, 2021

Just to add a little to the body of knowledge here. It was case sensitivity on an import statement that broke it for me. A dumb typo on my part that wasted the good part of a morning!

serenitus on Apr 30, 2021

@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 on Nov 20, 2020

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 on Nov 20, 2020

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.

andrevenancio on May 13, 2020

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 on Apr 7, 2019

~~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).

neurodynamic on Dec 11, 2018