Hot Module Reloading not working, dev server not being updated. #1591

vpicone · 2018-06-20T15:28:27Z

🐛 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

The text was updated successfully, but these errors were encountered:

DeMoorJasper · 2018-06-20T15:50:23Z

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

vpicone · 2018-06-20T17:11:49Z

@DeMoorJasper I'm using VS Code which doesn't have safe write functionality. microsoft/vscode#28927

vpicone · 2018-06-20T20:57:07Z

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

samsch · 2018-07-25T00:33:04Z

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.

Nufflee · 2018-07-26T23:36:14Z

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.

Michael-Naguib · 2018-07-28T01:40:41Z

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.

fabioricali · 2018-07-28T04:58:25Z

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

hrafnkellbaldurs · 2018-07-29T14:41:40Z

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.

gitnix · 2018-09-16T18:18:45Z

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.

caiokoiti · 2018-09-26T11:12:42Z

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

saneef · 2018-10-03T11:17:42Z

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

mixedCase · 2018-10-16T01:29:42Z

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

caiokoiti · 2018-10-16T03:06:23Z

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

mixedCase · 2018-10-16T04:17:21Z

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

russellmorgan · 2018-10-22T22:36:21Z

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

j0hnm4r5 · 2018-10-25T16:42:31Z

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.

tehfailsafe · 2018-10-28T03:37:18Z

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 · 2018-10-28T16:41:06Z

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.

xmclark · 2018-11-25T05:05:35Z

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

noman798 · 2018-11-29T16:34:02Z

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

fabioricali · 2018-12-09T20:36:05Z

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

xmclark · 2018-12-09T20:39:59Z

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

neurodynamic · 2018-12-11T19:36:08Z

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.

neurodynamic · 2018-12-11T21:18:47Z

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

Abhi10699 · 2018-12-22T07:18:24Z

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

sdaitzman · 2018-12-26T23:34:19Z

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

kennethkeim · 2020-11-20T14:23:49Z

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.

mischnic · 2020-11-20T14:37:03Z

@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?

kennethkeim · 2020-11-20T15:31:54Z

@mischnic Created a new issue here #5371
Let me know if I missed something. Thanks for your contributions ❤️

lukepighetti · 2021-02-08T21:08:23Z

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.

haroldao · 2021-04-20T20:02:27Z

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

Thanks, it worked 🚀🚀🎉.

serenitus · 2021-04-30T08:39:22Z

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!

SeniorHangouts · 2021-07-13T12:44:55Z

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.

amgj-dev · 2021-10-15T10:27:22Z

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

msfeldstein · 2021-11-11T22:12:09Z

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

AmodeusR · 2021-11-29T17:06:42Z

I was having the same problem here, it wasn't auto refreshing, but thanks to what @msfeldstein said it fixed for me, thanks!

GeorgeFlorian · 2021-11-30T15:43:48Z

I can confirm that this does not work for me as well.
I'm using "parcel": "^2.0.1" on VSC, on Ubuntu 20.04 LTS on a very simple and bare-boned structure.

{
  "name": "forkify-app",
  "version": "1.0.0",
  "description": "",
  "default": "index.html",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/GeorgeFlorian/Forkify-App.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/GeorgeFlorian/Forkify-App/issues"
  },
  "homepage": "https://github.com/GeorgeFlorian/Forkify-App#readme",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.0.1",
    "parcel": "^2.0.1"
  }
}

I have first tried running the script with the --no-cache option but to no avail.

I have changed from <script defer src="src/js/controller.js"</script> to <script defer src="src/js/controller.js" type="module"></script> and it started working for just one .js file.

Then I've created new .js files that I import inside controller.js. Changes made in those files do not reflect in the page. I have to manually reload the page in order to see the changes.

This bug kills productivity when you're trying to watch tutorials and you do the exact same things as the tutor, but it doesn't work as expected and then you have to search endlessly for a solution.

A-Spiral-Forge · 2022-01-07T08:29:11Z

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.

ShaCP · 2022-01-11T04:46:09Z

Same problem. Changes are not reflecting. I have to do ctrl + shift + r to hard refresh.

raff-run · 2022-01-12T19:02:26Z

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.

nunof07 · 2022-01-26T14:36:39Z

Using different ports worked for me as described here: #6994

j13ag0 · 2022-02-03T21:39:43Z

Installing the nuke-dist plugin helped.

F30 · 2022-03-15T16:55:10Z

Some notes on my experience with an instance of this problem (using Parcel 2.3.2) can be found in #7762.

EnmanuelleAcuna · 2022-04-03T03:06:20Z

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

alxkkt · 2022-04-15T20:07:56Z

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

Hongjia-Liu · 2022-04-19T12:36:54Z

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"

morphine00 · 2022-07-13T18:18:49Z

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.

K4L3D777 · 2022-08-06T19:00:43Z

the same problem here, I'm using atom, TSX, windows, and parcel 2.7.0. I restart the computer but the error keeps there. :(
The first time I run npm start it works, but then I can't see any change I make.

rahidt1 · 2022-08-14T16:58:18Z

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

converting script to module worked for me too. :)

johanbove · 2022-09-14T22:46:25Z

Replying to #1591 (comment)
Keeping the Parcel project on the /home/userName path on WSL 2 also seems to solve the issue described by OP.

morphine00 · 2022-09-15T15:45:58Z

Right, because that way you avoid the cross-filesystem penalty. It's really strange that WSL 2 is more advanced that WSL 1, and yet cross-filesystem access is such a big problem. Hope that Microsoft fixes this at some point.

krishan-kumar-mourya · 2022-11-13T12:38:19Z

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

I needed to add type="module" for all script tags in index.html

Nishaaaanth · 2023-05-26T04:11:55Z

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"

This fix works I had to remove the period at the beginning of each path

Gennady-G · 2023-11-22T15:59:33Z

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

DeMoorJasper closed this as completed Jun 20, 2018

DeMoorJasper reopened this Jun 20, 2018

DeMoorJasper added the 🐛 Bug label Jun 20, 2018

vpicone closed this as completed Jun 20, 2018

ideaOwl mentioned this issue Nov 10, 2021

Parcel 2.0.0 not reloading page on change anymore (Parcel 2.0.0-rc.0 still works fine) #7241

Closed

SufianBabri mentioned this issue Jan 15, 2022

Fix hot reloading upon changes to index.html. codypl/parcel-tailwind-starter#3

Merged

Hot Module Reloading not working, dev server not being updated. #1591

Hot Module Reloading not working, dev server not being updated. #1591

Comments

vpicone commented Jun 20, 2018 • edited

🐛 bug report

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

package.json

.babelrc

console command

🤔 Expected Behavior

😯 Current Behavior

🔦 Context

💻 Code Sample

index.html

index.js

🌍 Your Environment

DeMoorJasper commented Jun 20, 2018

vpicone commented Jun 20, 2018

vpicone commented Jun 20, 2018

samsch commented Jul 25, 2018

Nufflee commented Jul 26, 2018

Michael-Naguib commented Jul 28, 2018 • edited

fabioricali commented Jul 28, 2018

hrafnkellbaldurs commented Jul 29, 2018

gitnix commented Sep 16, 2018 • edited

caiokoiti commented Sep 26, 2018 • edited

saneef commented Oct 3, 2018

mixedCase commented Oct 16, 2018

caiokoiti commented Oct 16, 2018

mixedCase commented Oct 16, 2018

russellmorgan commented Oct 22, 2018

j0hnm4r5 commented Oct 25, 2018 • edited

tehfailsafe commented Oct 28, 2018 • edited

tehfailsafe commented Oct 28, 2018

xmclark commented Nov 25, 2018 • edited

noman798 commented Nov 29, 2018 • edited

fabioricali commented Dec 9, 2018

xmclark commented Dec 9, 2018

neurodynamic commented Dec 11, 2018

neurodynamic commented Dec 11, 2018 • edited

Abhi10699 commented Dec 22, 2018 • edited

sdaitzman commented Dec 26, 2018

kennethkeim commented Nov 20, 2020

mischnic commented Nov 20, 2020

kennethkeim commented Nov 20, 2020

lukepighetti commented Feb 8, 2021

haroldao commented Apr 20, 2021

serenitus commented Apr 30, 2021

SeniorHangouts commented Jul 13, 2021

amgj-dev commented Oct 15, 2021

msfeldstein commented Nov 11, 2021

AmodeusR commented Nov 29, 2021

GeorgeFlorian commented Nov 30, 2021 • edited

A-Spiral-Forge commented Jan 7, 2022

ShaCP commented Jan 11, 2022

raff-run commented Jan 12, 2022

nunof07 commented Jan 26, 2022

j13ag0 commented Feb 3, 2022

F30 commented Mar 15, 2022

EnmanuelleAcuna commented Apr 3, 2022

alxkkt commented Apr 15, 2022 • edited

Hongjia-Liu commented Apr 19, 2022

morphine00 commented Jul 13, 2022

K4L3D777 commented Aug 6, 2022 • edited

rahidt1 commented Aug 14, 2022

johanbove commented Sep 14, 2022

morphine00 commented Sep 15, 2022

krishan-kumar-mourya commented Nov 13, 2022

Nishaaaanth commented May 26, 2023

Gennady-G commented Nov 22, 2023

vpicone commented Jun 20, 2018 •

edited

Michael-Naguib commented Jul 28, 2018 •

edited

gitnix commented Sep 16, 2018 •

edited

caiokoiti commented Sep 26, 2018 •

edited

j0hnm4r5 commented Oct 25, 2018 •

edited

tehfailsafe commented Oct 28, 2018 •

edited

xmclark commented Nov 25, 2018 •

edited

noman798 commented Nov 29, 2018 •

edited

neurodynamic commented Dec 11, 2018 •

edited

Abhi10699 commented Dec 22, 2018 •

edited

GeorgeFlorian commented Nov 30, 2021 •

edited

alxkkt commented Apr 15, 2022 •

edited

K4L3D777 commented Aug 6, 2022 •

edited