parcel-bundler / parcel

The zero configuration build tool for the web. πŸ“¦πŸš€
https://parceljs.org
MIT License
43.37k stars 2.26k forks source link

Parcel 2: HMR Broken? #6685

Closed dioptre closed 2 years ago

dioptre commented 3 years ago

πŸ› bug report

As per the unresolved issue #6586 I also get:

the browser console just says "console cleared" - have to manually refresh? Also, until there is a code change this shows in browser console - [parcel] 🚨 Connection to the HMR server was lost

πŸ€” Expected Behavior

This used to update in place on the page a few weeks ago.

😯 Current Behavior

No changes are made but the console was cleared.

πŸ’ Possible Solution

Not sure. How would I debug this? It's hard to see what's happening esp with the console clearing.

πŸ”¦ Context

Slowing down dev times.

πŸ’» Code Sample

N/A

🌍 Your Environment

Software Version(s)
Parcel 2.0.0-rc0
Node 14.15.0
npm/Yarn berry (3.0.0)
Operating System mac

Similar issues?

If there's suggestions on how the community can help debug these please provide some insight.

Thanks!

danieltroger commented 3 years ago

It's hard to see what's happening esp with the console clearing.

You can check "preserve log" to prevent this in chrome

dioptre commented 3 years ago

I didn't see anything unusual in chrome, but ran it in firefox and see:

Screen Shot 2021-08-04 at 16 20 18

Not sure if that also has something to do with it?

devongovett commented 3 years ago

Do you have a code sample that can reproduce your issue?

dioptre commented 3 years ago

Unfortunately I can't really share my codebase rn. Seems there are a lot of people with this issue.

Any hints how I might help debug/solve it?

Otherwise I'll need to think about how to share something.

On Wed, Aug 4, 2021, 18:55 Devon Govett @.***> wrote:

Do you have a code sample that can reproduce your issue?

β€” You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/parcel-bundler/parcel/issues/6685#issuecomment-893102113, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFZTGHDJVWGV37WSK5QJMLT3HVP7ANCNFSM5BRZ5XGQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

jeffpeck10x commented 3 years ago

I am having this too. It seems like it started when I started using useContext and wrapping things in a Provider.

MaximeDesRoches commented 3 years ago

After some trial and error, it seems that the HMR_PORT is not set:

parcel serve 'src/(css|js)/index*(*).(scss|ts|js)' \
    --no-cache \
    --target main-dev \
    --public-url /assets \
    --dist-dir dist/assets \
    --cert ./.ssl/fullchain.pem \
    --key ./.ssl/privkey.pem \
    --host localhost \

with the target:

"main-dev": {
    "sourceMap": {
        "inline": true,
        "inlineSources": true
    }
},

image

Upon inspection, HMRRuntime.js doesn't seem to add the webserver port in the config and is instead using the current port (80).

var HMR_HOST = null;
var HMR_PORT = null;
var HMR_SECURE = true;
var HMR_ENV_HASH = "3df1cf77e366c81c";

Testing with postman, the connection is working when we specify the correct port:

image

kayomarz commented 3 years ago

For me, this issue was related to <script> using this command:

parcel serve src/index.html
  --dist-dir ../dist
  --public-url /foo/

hmr ok for the below src/index.html:

<!doctype html>
<html lang="en">
  <body>
    <p>Hello</p>
    <script type="module" src="./index.js"></script>
  </body>
</html>

hmr broken after adding another <script> tag:

(browser console just says "console cleared" - have to manually refresh)

<!doctype html>
<html lang="en">
  <body>
    <p>Hello</p>
    <script type="module" src="./index.js"></script>
    <script> // HMR broke after adding this, needed manual refresh. 
      console.log('hello);
    </script>
  </body>
</html>

hmr fixed after adding type="module" for second Githubissues.

  • Githubissues is a development platform for aggregating issues.