search

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.39k stars 2.27k forks source link

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

Closed vpicone closed 6 years ago

vpicone commented 6 years ago

🐛 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
DeMoorJasper commented 6 years ago

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

vpicone commented 6 years ago

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

vpicone commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

fabioricali commented 6 years ago

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

hrafnkellbaldurs commented 6 years ago

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 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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

mixedCase commented 5 years ago

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

caiokoiti commented 5 years ago

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

mixedCase commented 5 years ago

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

russellmorgan commented 5 years ago

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

j0hnm4r5 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

fabioricali commented 5 years ago

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

xmclark commented 5 years ago

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

neurodynamic commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

d2s commented 5 years ago

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.

josfaber commented 5 years ago

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; }
klausbreyer commented 5 years ago

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.

Ariyn commented 5 years ago

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?

chrisdmacrae commented 5 years ago

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)
only-cliches commented 5 years ago

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!

chaaya commented 5 years ago

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
giray123 commented 5 years ago

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>
mischnic commented 5 years ago

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

giray123 commented 5 years ago

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

boazblake commented 5 years ago

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

thedynabyte commented 5 years ago

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

juanrules commented 5 years ago

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

jptcnde commented 5 years ago

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

fabioricali commented 5 years ago

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

thepenguinthatwants commented 5 years ago

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?

jckw commented 5 years ago

Try:

yarn add parcel@v2

or 

npm install parcel@v2
thepenguinthatwants commented 5 years ago

Hi thanks!

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

thepenguinthatwants commented 5 years ago

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

devongovett commented 5 years ago

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.

JakubKoralewski commented 4 years ago

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

andrevenancio commented 4 years ago

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.

umutbozdag commented 4 years ago

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

kennethkeim commented 3 years ago

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.