search

nuxt / devtools

Unleash Nuxt Developer Experience
https://devtools.nuxt.com
MIT License
2.81k stars 154 forks source link

fix: DevTools showing ERROR: write EPIPE - WebSocket disconnected #631

Closed martinszeltins closed 4 months ago

martinszeltins commented 4 months ago

🐛 The bug

I just installed the latest version of Nuxt 3.11.1 and also latest version of Nuxt Devtools 1.1.3. When I start the dev server and try to open the DevTools it shows an error in the console. I thought this might be fixed with #630 but it still shows me this error. I would be happy to provide any extra info to help debug this issue. This seems to be happening only on my computer as others have said that it works fine on their computers. I tried restarting my computer, tried running dev server on a different port and still does not work.

This is a completely fresh Nuxt 3.11.1 installation with npx nuxi@latest init nuxt-app

My environment:

------------------------------
- Operating System: Linux
- Node Version:     v20.11.0
- Nuxt Version:     3.11.1
- CLI Version:      3.11.1
- Nitro Version:    -
- Package Manager:  pnpm@8.1.0
- Builder:          -
- User Config:      devtools
- Runtime Modules:  -
- Build Modules:    -
------------------------------

DevTools screenshot: https://i.imgur.com/tZcjZSK.png Console output screenshot: https://i.imgur.com/BRA3daV.png

Error:

WebSocket disconnected

 ERROR  [nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'on')
  at new BroadcastChannel (https://nuxtstartermgbfcn-d1og.w-credentialless-staticblitz.com/blitz.810981ba.js:65:5652)  
  at Module.initAppSeparateWindow (./node_modules/@vue/devtools-core/dist/index.js:711:19)  
  at eval (./node_modules/@nuxt/devtools/dist/runtime/vue-devtools/overlay.mjs:8:23)  
  at async ViteNodeRunner.runModule (./node_modules/vite-node/dist/client.mjs:379:5)  
  at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:363:5)  
  at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:206:14)  
  at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:250:12)  
  at async eval (./node_modules/nuxt/dist/app/entry.js:1:216)  
  at async ViteNodeRunner.runModule (./node_modules/vite-node/dist/client.mjs:379:5)  
  at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:363:5)

Here are my ENV variables if perhaps it has anything to do with this (Ubuntu 20.04 LTS, GNOME):

$ printenv

LC_NAME=en_US.UTF-8
SSH_AUTH_SOCK=/run/user/1000/keyring/ssh
SESSION_MANAGER=local/martins-ubuntu:@/tmp/.ICE-unix/5216,unix/martins-ubuntu:/tmp/.ICE-unix/5216
PAPERSIZE=letter
GNOME_TERMINAL_SCREEN=/org/gnome/Terminal/screen/acc1e2c8_bdcd_4472_bef6_d38da68a38ce
XDG_CURRENT_DESKTOP=ubuntu:GNOME
SSH_AGENT_PID=5181
LC_IDENTIFICATION=en_US.UTF-8
DEFAULTS_PATH=/usr/share/gconf/ubuntu.default.path
IM_CONFIG_PHASE=1
COLORTERM=truecolor
LANG=en_US.UTF-8
GPG_AGENT_INFO=/run/user/1000/gnupg/S.gpg-agent:0:1
USER=martins
DESKTOP_SESSION=ubuntu
XDG_MENU_PREFIX=gnome-
HOME=/home/martins
QT_IM_MODULE=ibus
LC_MEASUREMENT=en_US.UTF-8
INSIDE_NAUTILUS_PYTHON=
VTE_VERSION=6003
DBUS_SESSION_BUS_ADDRESS=unix:path=/run/user/1000/bus,guid=5bd6b897c5365c466bd6453f65fbdb21
PWD=/home/martins/Downloads/nuxt-starter-mgbfcn
LC_NUMERIC=en_US.UTF-8
_=/usr/bin/printenv
GTK_MODULES=gail:atk-bridge
WINDOWPATH=2
JOURNAL_STREAM=8:129858
XDG_SESSION_DESKTOP=ubuntu
QT_ACCESSIBILITY=1
GNOME_DESKTOP_SESSION_ID=this-is-deprecated
XDG_CONFIG_DIRS=/etc/xdg/xdg-ubuntu:/etc/xdg
LC_TIME=en_US.UTF-8
MANDATORY_PATH=/usr/share/gconf/ubuntu.mandatory.path
XDG_DATA_DIRS=/usr/share/ubuntu:/home/martins/.local/share/flatpak/exports/share:/var/lib/flatpak/exports/share:/usr/local/share/:/usr/share/:/var/lib/snapd/desktop
LOGNAME=martins
GNOME_TERMINAL_SERVICE=:1.1123
LC_PAPER=en_US.UTF-8
GNOME_SHELL_SESSION_MODE=ubuntu
XDG_RUNTIME_DIR=/run/user/1000
XMODIFIERS=@im=ibus
SHELL=/usr/bin/zsh
DBUS_STARTER_BUS_TYPE=session
LC_MONETARY=en_US.UTF-8
LC_TELEPHONE=en_US.UTF-8
USERNAME=martins
MANAGERPID=5057
PATH=/home/martins/.bun/bin:/home/martins/.local/share/pnpm:/home/martins/.nvm/versions/node/v20.11.0/bin:/home/martins/Applications:/home/martins/Scripts/tr-sync-sass:/home/martins/Scripts:/home/martins/.local/bin:/home/martins/.yarn/bin:/home/martins/.config/yarn/global/node_modules/.bin:/home/martins/.config/composer/vendor/bin:/opt/firefox/firefox:/home/martins/.cargo/bin:/home/martins/.local/bin:/home/martins/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
INVOCATION_ID=0d7857a1d29e438a920d71a8f7f40c73
SHLVL=1
XAUTHORITY=/run/user/1000/gdm/Xauthority
XDG_SESSION_TYPE=x11
DBUS_STARTER_ADDRESS=unix:path=/run/user/1000/bus,guid=5bd6b897c5365c466bd6453f65fbdb21
XDG_SESSION_CLASS=user
TERM=xterm-256color
LC_ADDRESS=en_US.UTF-8
DISPLAY=:1
GDMSESSION=ubuntu
OLDPWD=/home/martins/Downloads/nuxt-starter-mgbfcn
ZSH=/home/martins/.oh-my-zsh
PAGER=less
LESS=-R
LSCOLORS=Gxfxcxdxbxegedabagacad
LS_COLORS=rs=0:di=01;34:ln=01;36:mh=00:pi=40;33:so=01;35:do=01;35:bd=40;33;01:cd=40;33;01:or=40;31;01:mi=00:su=37;41:sg=30;43:ca=30;41:tw=30;42:ow=34;42:st=37;44:ex=01;32:*.tar=01;31:*.tgz=01;31:*.arc=01;31:*.arj=01;31:*.taz=01;31:*.lha=01;31:*.lz4=01;31:*.lzh=01;31:*.lzma=01;31:*.tlz=01;31:*.txz=01;31:*.tzo=01;31:*.t7z=01;31:*.zip=01;31:*.z=01;31:*.dz=01;31:*.gz=01;31:*.lrz=01;31:*.lz=01;31:*.lzo=01;31:*.xz=01;31:*.zst=01;31:*.tzst=01;31:*.bz2=01;31:*.bz=01;31:*.tbz=01;31:*.tbz2=01;31:*.tz=01;31:*.deb=01;31:*.rpm=01;31:*.jar=01;31:*.war=01;31:*.ear=01;31:*.sar=01;31:*.rar=01;31:*.alz=01;31:*.ace=01;31:*.zoo=01;31:*.cpio=01;31:*.7z=01;31:*.rz=01;31:*.cab=01;31:*.wim=01;31:*.swm=01;31:*.dwm=01;31:*.esd=01;31:*.jpg=01;35:*.jpeg=01;35:*.mjpg=01;35:*.mjpeg=01;35:*.gif=01;35:*.bmp=01;35:*.pbm=01;35:*.pgm=01;35:*.ppm=01;35:*.tga=01;35:*.xbm=01;35:*.xpm=01;35:*.tif=01;35:*.tiff=01;35:*.png=01;35:*.svg=01;35:*.svgz=01;35:*.mng=01;35:*.pcx=01;35:*.mov=01;35:*.mpg=01;35:*.mpeg=01;35:*.m2v=01;35:*.mkv=01;35:*.webm=01;35:*.ogm=01;35:*.mp4=01;35:*.m4v=01;35:*.mp4v=01;35:*.vob=01;35:*.qt=01;35:*.nuv=01;35:*.wmv=01;35:*.asf=01;35:*.rm=01;35:*.rmvb=01;35:*.flc=01;35:*.avi=01;35:*.fli=01;35:*.flv=01;35:*.gl=01;35:*.dl=01;35:*.xcf=01;35:*.xwd=01;35:*.yuv=01;35:*.cgm=01;35:*.emf=01;35:*.ogv=01;35:*.ogx=01;35:*.aac=00;36:*.au=00;36:*.flac=00;36:*.m4a=00;36:*.mid=00;36:*.midi=00;36:*.mka=00;36:*.mp3=00;36:*.mpc=00;36:*.ogg=00;36:*.ra=00;36:*.wav=00;36:*.oga=00;36:*.opus=00;36:*.spx=00;36:*.xspf=00;36:
DIRHISTORY_SIZE=30
AUTOJUMP_SOURCED=1
AUTOJUMP_ERROR_PATH=/home/martins/.local/share/autojump/errors.log
HSTR_CONFIG=hicolor
NVM_DIR=/home/martins/.nvm
NVM_CD_FLAGS=-q
NVM_BIN=/home/martins/.nvm/versions/node/v20.11.0/bin
NVM_INC=/home/martins/.nvm/versions/node/v20.11.0/include/node
TOOLTIP_CHECK=true
LIPO_CHECK=true
PNPM_HOME=/home/martins/.local/share/pnpm
BUN_INSTALL=/home/martins/.bun

🛠ī¸ To reproduce

npx nuxi@latest init nuxt-app

🌈 Expected behavior

Expecting DevTools to work.

ℹī¸ Additional context

No response

arashsheyda commented 4 months ago

@martinszeltins as you can see in the console log you are using a very old version of Nuxt DevTools: 0.3.1 (probably cached). check this comment

martinszeltins commented 4 months ago

@martinszeltins as you can see in the console log you are using a very old version of Nuxt DevTools: 0.3.1 (probably cached). check this comment

@arashsheyda Thank you! There was indeed a ~/.nuxtrc file in my home directory and it included something about @nuxt/devtools

I have no clue how it got there or why it locked the devtools version causing it to install an old version. This is very strange and totally unexpected. This feels like a bug in pnpm or Nuxt. When I ran nuxi@latest init I wanted it to install the latest version of everything not a very old cached version of Devtools. And I didn't even ask it to cache it.

I think the DX could be much improved if the developer was given a choice about this. Because right now I was pulling out my hair trying to figure out why Devtools was not working or why it installed a very old version when I specifically said I wanted to install the latest version of Nuxt. What do you think?

This was my ~/.nuxtrc file (I did not know it even existed) Very frustrating... đŸ˜Ŗ 

telemetry.consent=1
telemetry.enabled=true
telemetry.seed=75ccc17ff3c6d221
modules.0=/home/martins/.nvm/versions/node/v18.12.1/lib/node_modules/@nuxt/devtools/module.cjs
devtoolsGlobal.projects.0=/home/martins/Programming/test/nuxt/my-nuxt-1

After deleting the ~/.nuxtrc file, everything worked again!

fefogarcia commented 3 months ago

@martinszeltins as you can see in the console log you are using a very old version of Nuxt DevTools: 0.3.1 (probably cached). check this comment

@arashsheyda Thank you! There was indeed a ~/.nuxtrc file in my home directory and it included something about @nuxt/devtools

I have no clue how it got there or why it locked the devtools version causing it to install an old version. This is very strange and totally unexpected. This feels like a bug in pnpm or Nuxt. When I ran nuxi@latest init I wanted it to install the latest version of everything not a very old cached version of Devtools. And I didn't even ask it to cache it.

I think the DX could be much improved if the developer was given a choice about this. Because right now I was pulling out my hair trying to figure out why Devtools was not working or why it installed a very old version when I specifically said I wanted to install the latest version of Nuxt. What do you think?

This was my ~/.nuxtrc file (I did not know it even existed) Very frustrating... đŸ˜Ŗ

telemetry.consent=1
telemetry.enabled=true
telemetry.seed=75ccc17ff3c6d221
modules.0=/home/martins/.nvm/versions/node/v18.12.1/lib/node_modules/@nuxt/devtools/module.cjs
devtoolsGlobal.projects.0=/home/martins/Programming/test/nuxt/my-nuxt-1

After deleting the ~/.nuxtrc file, everything worked again!

This solved it for me as well, thank you!