Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Poor Discoverability of npm/pnpm Selector in Vercel Analytics Setup

Aperta
  • Qualcosa non va?
#201 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
48/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
typescript
Ambito
design, documentation

Direzione di ricerca

Start with the setup guide section titled “Add @vercel/analytics to your project” and inspect the command selector shown there. Trace the selector’s UI entry point and determine how its package-manager options are presented. Done means users can clearly recognize and switch between npm, yarn, and pnpm without relying on an unlabeled icon.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

I ran into an issue while setting up analytics on my website using Vercel.

While following the setup guide, I got to the section “Add @vercel/analytics to your project”. The default command shown was using pnpm, but my project setup uses npm. I tried looking for an option to switch the command, but I couldn’t find it immediately.

At first, it wasn’t clear that there was a way to change the command type. I spent about 20 minutes trying to figure it out and even left the page to search for alternatives. Eventually, I came back and discovered that the small icon in that section was actually meant to switch between different package managers (npm, yarn, pnpm, etc.). When found, it took me less than 5 minutes to set up the feature.

Image
Problem

The main issue is the poor discoverability of the command selector.

  • The icon doesn’t clearly communicate that it is clickable or a dropdown.
  • There is no visible label like “Select command” to guide the user.
  • For a task that should take a few minutes, this caused unnecessary confusion and frustration.
  • Users who are not very familiar with documentation patterns or UI conventions may easily miss it completely.

This can lead to a poor user experience, especially for beginners who may assume the documentation is fixed to pnpm only.

Impact
  • Wasted time trying to find the correct npm command.
  • Temporary frustration over a simple setup step.
  • Potential drop-off if a user gives up and tries another tool or guide.
Suggestion

The UI should make this interaction more obvious.

A simple improvement would be:

  • Replace or supplement the icon with a clear label like “Select command.”
  • Or use a visible dropdown with text, for example:
  • “npm”
  • “yarn”
  • “pnpm”

Since a default command is already shown, users should immediately understand that this section is interactive and meant for switching package managers, not just a static instruction.

Example Reference

Here is a screenshot example of a dropdown that clearly communicates the action to users:

Image
Lingua principale
TypeScript
Stelle
518
Fork
54
Merge medio
6h 21m
PR unite (30g)
3

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di vercel/analytics

Tutte le issue di vercel/analytics

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.