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.

Sign up for GitHub

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

Jump to bottom

HMR is broken for a simple skeleton app #28135

Closed
x-tropy opened this issue Jul 12, 2024 · 13 comments
Closed

HMR is broken for a simple skeleton app #28135

x-tropy opened this issue Jul 12, 2024 · 13 comments
Labels
needs reproduction pending triage

Comments

@x-tropy
Copy link

x-tropy commented Jul 12, 2024 •
edited
Loading

Environment

  • Operating System: Darwin
  • Node Version: v22.0.0
  • Nuxt Version: 3.12.3
  • CLI Version: 3.12.0
  • Nitro Version: 2.9.7
  • Package Manager: [email protected]
  • Builder: -
  • User Config: devtools, modules, compatibilityDate
  • Runtime Modules: @nuxt/[email protected]
  • Build Modules: -

Reproduction

the app is generated with this command:
npx nuxi init -t ui <app>

I added an about page
image

Then added a <NuxtLink> to about page in app.vue
image

Describe the bug

first of all, hmr is not working, I see nothing in the /about route.

secondly, i see this warning in the command line:


 ERROR  [unhandledRejection] write EPIPE                                                                                            4:54:41 PM

  at afterWriteDispatched (node:internal/stream_base_commons:161:15)
  at writeGeneric (node:internal/stream_base_commons:152:3)
  at Socket._writeGeneric (node:net:953:11)
  at Socket._write (node:net:965:8)
  at writeOrBuffer (node:internal/streams/writable:564:12)
  at _write (node:internal/streams/writable:493:10)
  at Writable.write (node:internal/streams/writable:502:10)
  at Socket.ondata (node:internal/streams/readable:1007:22)
  at Socket.emit (node:events:520:28)
  at addChunk (node:internal/streams/readable:559:12)

Additional context

image
image

Logs

No response
@x-tropy
Copy link
Author

x-tropy commented Jul 14, 2024

Also the [Vue Router warn], this might relate to HMR failure:
image

@HigherOrderLogic
Copy link
Contributor

Seems like an upstream issue from Vite for me.

@x-tropy
Copy link
Author

x-tropy commented Jul 14, 2024 via email

@danielroe
Copy link
Member

You need to add <NuxtPage /> to your app.vue to enable showing the page content.

@danielroe danielroe closed this as not planned Won't fix, can't repro, duplicate, stale Jul 14, 2024
@x-tropy
Copy link
Author

x-tropy commented Jul 17, 2024 •
edited
Loading

Thanks daniel for replying.

I get your point about adding <NuxtPage /> to app.vue, but this won't solve the issue here. Even the most basic project setup won't work and the socket warning persits.

This shouldn't be prevelant issues, maybe just me, but I really can't figure out why...

@danielroe would you mind a second look at the warning messages?

@x-tropy
Copy link
Author

x-tropy commented Jul 17, 2024 •
edited
Loading

To illustrate further, here are some more screenshots:
image
image

Restarting the dev server will render the previously unfound /parent/child/grand route, but manually restarting server every time is simply painful. Really hope to solve this. Thank anyone might give me a hand in advance!

@github-actions GitHub Actions
Copy link
Contributor

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

@danielroe danielroe reopened this Jul 17, 2024
@danielroe
Copy link
Member

Sure - would you provide a reproduction?

@x-tropy
Copy link
Author

x-tropy commented Jul 18, 2024

Thanks @danielroe ! Here is a minimal project setup as public Github repo: https://github.com/x-tropy/reproduce-hmr-issue

After adding /pages/hello.vue, the dev server starts yelling at me about the socket error:
image

Additional environment info:

pnpm -v
9.5.0

node -v
v22.0.0

@x-tropy
Copy link
Author

x-tropy commented Jul 18, 2024 •
edited
Loading

the initial project boilerplate is created by Nuxtr: Create new Nuxt Project vscode extension command.

@x-tropy
Copy link
Author

x-tropy commented Jul 18, 2024 •
edited
Loading

I've trie running the provided repo in stackblitz, HMR does work...This isn't a real reproduction of issue then.
But in my local computer, adding new route does nothing, until I restart the dev server.

@danielroe
Copy link
Member

Your directory name might be the issue. (I believe there are upstream issues here.) Try renaming [1] Frontend to frontend and see if that works.

@x-tropy
Copy link
Author

x-tropy commented Jul 19, 2024

Yes, it's the folder name's fault. Thank you! I'm closing this issue.

@x-tropy x-tropy closed this as completed Jul 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs reproduction pending triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@x-tropy @danielroe @HigherOrderLogic