-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Parcel 2: HMR Broken? #6685
Comments
You can check "preserve log" to prevent this in chrome |
Do you have a code sample that can reproduce your issue? |
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
<#6685 (comment)>,
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>
.
|
I am having this too. It seems like it started when I started using |
After some trial and error, it seems that the HMR_PORT is not set:
with the target: "main-dev": {
"sourceMap": {
"inline": true,
"inlineSources": true
}
}, 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: |
For me, this issue was related to
hmr ok for the below
hmr broken after adding another (browser console just says "console cleared" - have to manually refresh)
hmr fixed after adding
DebuggingI tried debugging in the browser and observed that when hmr is broken, the asset change gets detected by the websocket but because In case it helps, you can try this in the browser, putting a break-point inside the following filter function:
|
Same issue with adding a 3rd party script like bootstrap (multiple |
It seems like HMR works for html, but not for the transformers (Elm in my case). |
Changing my script type from |
I was importing a typescript module: |
We fixed some issues with HMR recently. Does this still happen if you use the latest nightly version? |
Just tried with the latest parcel
yet, I need to manually refresh the page. If I "Preserve Logs", I only get:
|
I am seeing the same issue |
Can either of you give any other details about your project or setup? Like how can we reproduce this? |
@devongovett I tried to create a small project that reproduces this issue this morning, however HMR is working perfectly there. And even as I bring in various “complexities”, like the use of a context provider and multiple components, and asynchronous fetching to update state, HMR still continues to work flawlessly. I am trying to narrow down exactly what the problem is, as it is still happening in my larger application (that I cannot share). I will update here if I find anything, and will post a demo if reproducible. |
I cannot figure this out. When I pull out pieces of my project, the behavior described above of it not refreshing and just printing "Console was cleared" continues to happen. Then, after some point of pulling away pieces of the project, it stops happening and HMR works perfectly. I then revert the last thing that I undid.. and HMR still works perfectly. :( I have tried deleting .parcel-cache, deleting node_modules, and deleting yarn.lock and installing everything anew. I have tried different versions of parcel. I cannot seem to figure out what is the critical thing that causes HMR to break. I even had the idea that maybe my IDE (PyCharm) was the issue because it sometimes reformats the file and saves a second time (causing two quick file changes), but even making changes from a different editor does not have any affect. |
Ok, I got something! My project is a monorepo with different packages. I found when I removed one particular package, HMR works in parcel. When I put that package back, it breaks. So, what's the package?....
In particular, if I remove this one dependency from
HRM is fixed. So, that should help, right? I will see about making a small demo of this to test yourself. |
@devongovett I have made a small repo that consistently demonstrates the issue that I am having: Please try the steps in the README. For anyone finding this thread, it seems that the issue is that the It looks like the specific dependencies of {
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"react-refresh": "^0.8.3"
} i.e. if your project has those dependencies, even indirectly, it may cause parcel HMR to not work. |
It seems you are ending up with multiple copies of
This is because |
Aha! So, adding this to my top-level
But, in general, re:
Is there anything that can be done to ensure that Parcel runtime is using the same dependencies? Alternatively, maybe Parcel can issue a warning when multiple copies are found. Deck.gl does this and will not run if there are multiple versions of a dependency It seems like there are several threads about this issue of broken HMR, and even just issuing a warning would make it easy for somebody to get to the bottom of. Like, |
I seem to have fixed the HMR issue too. There were two things I did:
|
I was able to recreate this issue with a newly created project so that you can reproduce the issue. Steps are in the README of this git repo |
@maxbaun React Refresh requires the entry component passed to |
I had this exact issue (console clear without any changes) in a project where I was using React 16. Upgrading to React 17 fixed fast-refresh. |
@andreafdaf I was also having an issue where An initial the solution was to delete the .parcel-cache. Looking at it further The change I made is found by parcel here
But in the map below it was being stored as src/App.tsx ! So the change was being ignored by the build.
The reason it was stored in this way was due to the import in index.tsx. By correcting this the build issue is resolved and so is hmr.
|
Thanks a lot lost 4h, it was f... storybook@6.2.9 So I added this resolution as @jeffpeck10x advised
and |
I have been working on this error for the better part of today. I eventually "fixed" the problem, but I have no idea why what I did works. I moved my After moving the index file and refactoring all usage of Before moving Further confusing me, I was not able to replicate this issue in another project, even when using the exact same Also, I noticed that I wish any of this were more concrete, but I figured I should report what I saw in case it helps get to a resolution. |
@andreafdaf I tried your example but it worked for me... |
Still having the exact same issue as @andreafdaf (React v17, TypeScript, Parcel v2.2.1, MacOS using VSCode through SSH on Ubuntu box). Curious -- were you able to figure out what the issue was? |
Hi @nikhilgupta345 I have updated to parcel@^2.2.1 and it now works fine, which version are you on? I was having this problem on 2.0.1. @devongovett I guess #7514 fixed things also for this case, at least for me. Thanks 👏 🎉 |
I'm having the problem on v2.2.1 unfortunately. I'll continue looking but it seems we're getting the updates via the websocket, but they're not getting applied on the browser. I stepped through the code and the hashes being sent match what react-refresh knows about and the |
I'm also seeing identical behavior, using v2.21, described by @nikhilgupta345. The WebSocket receives an update notification with the console cleared, but no update is applied. Interestingly, if I touch, i.e., edit without changing, the package.json or .parcelrc file, this will cause a content refresh. |
Hi @nikhilgupta345. I managed to solve my problem by switching relative imports to tilde spcifiers. Works like a charm now - very fast. |
I have a very similar issue to the one @andreafdaf has described. Here, you can find an exemplary project with parcel and preact https://github.com/ibqn/preact-alias. So, if |
I have the same issue as @andreafdaf and @nikhilgupta345 on v2.7.0 of Parcel, only instead of React, I'm using Elm. I'm on a Mac running zsh through iterm2. https://github.com/XtraKrispi/board-game-framework for reference |
This worked temporarily with Firefox. After a couple of saves the issue re-appeared OLD: NEW: The OLD approach only generates the issue with both Firefox and Firefox Dev Chrome works fine with both Edit: Error re-appeared |
I'm having this issue on |
For me, parcel is receiving the HMR payload, and it is updating the main No workaround is working. Tried the tilde import, relative import, and all the same. Only a refresh would update the content (from Update: A solution for me is to install react as a dependency instead of aliasing the package in package.json. Now it is working. |
What fixed the issue for me was not seeting the port explicitly in the hmrOptions while running parcel through parcel API |
I'm seeing this issue on Parcel v2.9.3 with React 18 on macOS 13.5.1. We're not using storybook and the only react-refresh dependencies are v0.9.0 from Parcel. If I save the UPDATE: I should note that I see |
I set up a dead simple Typescript web project and am having the same issue as mentioned many times in this thread. I could see the changes being received by the Parcel HMR code in my debugger, but it never reloaded the page, which was needed to update the DOM. |
@bjornhanson @programmist Can you provide a reproduction? Otherwise there's nothing we can do here |
Hi @mischnic . Apologies - I would have done so, but I assumed this wasn't being worked on as the issue was closed. Here's a github repo with a super simple node web app using TypeScript that reproduces the issue: I created this project by initializing TS and Node projects in a new directory... mkdir hello-web
cd hello-web
tsc --init
npm init -y ...and then adding an To Reproduce the Issue:
At this point I would have expected to see the text on the page update, but it doesn't. All I see is a "console was cleared" message in the JS console. In order to see an update I must manually refresh the browser page. Incidentally, I went to the line of code which clears the console and set a breakpoint a few lines earlier in the |
Strangely enough this is the only way the hmr is working for my setup: firefox, typescript, p5js |
Migrated from cra (Create React App), we found |
🐛 bug report
As per the unresolved issue #6586 I also get:
🤔 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
Similar issues?
If there's suggestions on how the community can help debug these please provide some insight.
Thanks!
The text was updated successfully, but these errors were encountered: