search

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.49k 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
mischnic commented 3 years ago

@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 commented 3 years ago

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

lukepighetti commented 3 years ago

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

Thanks, it worked 🚀🚀🎉.

serenitus commented 3 years ago

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

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

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

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

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

GeorgeFlorian commented 2 years ago

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

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

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

raff-run commented 2 years ago

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

  1. Make a hotreload.js/.ts
  2. 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();
    };
}
};
  3. Call enableHotReload(); in your index.tsx just below ReactDOM.render(); and done.
nunof07 commented 2 years ago

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

j13ag0 commented 2 years ago

Installing the nuke-dist plugin helped.

F30 commented 2 years ago

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

EnmanuelleAcuna commented 2 years ago

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

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

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

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

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

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

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.

morphine00 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

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