Skip to content
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

🐛 BUG: Vite's HMR not working with client-side scripts in new Beta #3681

Closed
1 task
kylesloper opened this issue Jun 22, 2022 · 17 comments · Fixed by #4645
Closed
1 task

🐛 BUG: Vite's HMR not working with client-side scripts in new Beta #3681

kylesloper opened this issue Jun 22, 2022 · 17 comments · Fixed by #4645
Assignees
Labels
- P5: urgent Fix build-breaking bugs affecting most users, should be released ASAP (priority) feat: hmr Related to HMR (scope)

Comments

@kylesloper
Copy link

kylesloper commented Jun 22, 2022

What version of astro are you using?

1.0.0-beta.50

Are you using an SSR adapter? If so, which one?

N/A

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

To be clear, I have searched the docs to see if this is intended behaviour but I can't see anything nothing on it. Using any Astro project returns the same result in which the Vite server must be restarted for changes in client side scripts to take effect.

I have only tested this on my Windows machine - not sure if this is OS related.

Link to Minimal Reproducible Example

N/A: issue present on every Astro project

Participation

  • I am willing to submit a pull request for this issue.
@bholmesdev
Copy link
Contributor

Thanks for reporting @kylesloper! So far, I've tested:

  • A React component using any client: directive
  • Hoisted scripts using a standard script tag (triggers full-page refresh)
  • Inline scripts using is:inline (triggers full-page refresh)

Could you share which features are failing for you specifically? I'm interested if this is a windows issue...

@kylesloper
Copy link
Author

  • Svelte component with any client directive: works as expected

  • Scripts with vanilla JS and no hoisted import etc:

<script>
   console.log("Hello World")
</script>

and then when making changes to this client script

<script>
    console.log("Goodbye World")
</script>

Vite does not do a full page refresh or HMR. To see new changes you must restart the server.

  • Inline client scripts does the same. No refresh.

@bholmesdev
Copy link
Contributor

bholmesdev commented Jun 22, 2022

Got it, so hoisted and inline scripts specifically. I'm still unable to replicate on my end (tried multiple browsers to be sure), so I'm not sure if this is a windows issue. I'll try replicating on a windows machine to see if that's the culprit.

In the meantime, would you mind sending a reproduction on stackblitz to be 100% sure?

@bholmesdev bholmesdev added - P3: minor bug An edge case that only affects very specific usage (priority) s1-small labels Jun 22, 2022
@kylesloper
Copy link
Author

Hmm that's strange. Stackblitz working as expected but not locally in VS code. Do you have any suggestions @bholmesdev.

https://stackblitz.com/edit/withastro-astro-9uu85z?file=src/pages/index.astro

@silveltman
Copy link

Having the same issue here.
Made a reproduction: #3832

I get the issue in all browsers while on my windows machine. It seemed to suddenly have arrised, earlier I wasn't having this problem.

@FredKSchott FredKSchott added the feat: hmr Related to HMR (scope) label Jul 7, 2022
@arimgibson
Copy link
Contributor

arimgibson commented Jul 8, 2022

Can confirm that this seems Windows-specific. I decided to give it a shot using Windows Subsystem for Linux (i.e. running linux on Windows) and everything worked as expected.

Trying WSL or a Linux VM could be a temporary solution @kylesloper @silveltman . Using WSL (don't want to explain detailed VM networking), you should be able to run the actual astro server on Linux, and then continue coding/viewing on Windows

@tusamni
Copy link

tusamni commented Aug 23, 2022

Yup, this is happening to me on Windows 11 and is very frustrating when doing development with client side scripts.

@micvolo
Copy link

micvolo commented Aug 27, 2022

me too, i also have the same problem on windows 11 and astro 1.1.1. WIth WSL everything works as expected. So its a windows-related bug. Does someone found a solution or we are bound to WSL?

@bholmesdev bholmesdev added - P4: important Violate documented behavior or significantly impacts performance (priority) and removed - P3: minor bug An edge case that only affects very specific usage (priority) labels Aug 27, 2022
@bluwy bluwy assigned bluwy and unassigned bluwy Aug 27, 2022
@nomorej
Copy link

nomorej commented Aug 31, 2022

this is the last thing that keeps me from fully enjoying astro

@bholmesdev bholmesdev self-assigned this Aug 31, 2022
@FredKSchott FredKSchott added - P5: urgent Fix build-breaking bugs affecting most users, should be released ASAP (priority) and removed - P4: important Violate documented behavior or significantly impacts performance (priority) labels Aug 31, 2022
@FredKSchott
Copy link
Member

Bumping this up to urgent to make sure this gets looked at. Thanks everyone who has reported this so far

@matthewp
Copy link
Contributor

matthewp commented Sep 8, 2022

Kapture.2022-09-08.at.17.12.14.mp4

What am I missing here, it seems to be HMRing just fine.

@tusamni
Copy link

tusamni commented Sep 8, 2022

I did a simple test, and it does indeed work with is:inline.

It didn't work for me with a hoisted script. That might be by design, I'm no expert.

@matthewp
Copy link
Contributor

matthewp commented Sep 8, 2022

Ok great, so it's hoisted scripts specifically, I can see that now @tusamni, thank you.

@arimgibson
Copy link
Contributor

arimgibson commented Sep 8, 2022

Strange @matthewp ... Personally I was using command prompt instead of PowerShell, what about others? Wouldn't have guessed that as a potential issue; will try with PowerShell later today

Edit: seems like the consensus is that it's a hoisted scripts problem, not dependant on the type of Windows shell :)

@matthewp
Copy link
Contributor

matthewp commented Sep 8, 2022

Found the problem.

@matthewp
Copy link
Contributor

matthewp commented Sep 9, 2022

PR will go out today: #4645

@matthewp
Copy link
Contributor

matthewp commented Sep 9, 2022

This fix is going out with 1.1.8 right now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P5: urgent Fix build-breaking bugs affecting most users, should be released ASAP (priority) feat: hmr Related to HMR (scope)
Projects
None yet
Development

Successfully merging a pull request may close this issue.