Component Duplication Upon Dev Server Reload

Aperta
#202 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
52/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
javascript, vite
Ambito
frontend, tooling

Direzione di ricerca

Riproduci il problema con la sequenza di ricaricamento di App.jsx e index.jsx, usando la configurazione mostrata in vite.config.js e le dipendenze Solid/Vite elencate. Inizia verificando se il salvataggio di un file diverso da index.jsx duplica i componenti instradati, e considera il problema risolto quando ricaricamenti a caldo ripetuti lasciano l’albero dei componenti renderizzato una sola volta.

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

Descrizione

need reproduction
Image

After triggering hot reload from App.jsx 3 times.

Image

After subsequently triggering hot reload from index.jsx once.

  1. Created a new project using npx degit solidjs/templates/js my-app
  2. npm install
  3. npm i @solidjs/router
  4. npm run dev
  5. In index.jsx import { Route, Router } from '@solidjs/router';
  6. In index.jsx render( () =>( // <Router root={App} /> <Router> <Route path="/" component={App} /> <Route path="/projects" component={Projects} /> <Route path="/projects/:id" component={Project} /> </Router> ), root);
  7. npm run dev
  8. Trigger hot reload via saving VSCode file
  9. Observe component duplication every time hot reload triggers

Additional Considerations:

  • I do have tailwindcss vite plugin installed npm install tailwindcss @tailwindcss/vite

EDIT Having started a new project without tailwind, the duplication error still happens. It happens only when saving a file other than index.jsx. Saving index.jsx seems to work as expected with no duplication.

Environment:

  • Device: MacBook Pro
  • Chip: Apple M1 Max
  • macOS version: Sequoia 15.3.1
  • Chrome version: Version 133.0.6943.128 (Official Build) (arm64)

Dev Deps:

  • "vite": "^6.0.0"
  • "vite-plugin-solid": "^2.11.6"

Deps:

  • "@solidjs/router": "^0.15.3"
  • "@tailwindcss/vite": "^4.0.9"
  • "solid-js": "^1.9.5"
  • "tailwindcss": "^4.0.9"

vite.config.js
`import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
plugins: [solidPlugin(), tailwindcss()],
server: {
port: 5173,
},
build: {
target: "esnext",
},
});
`

Lingua principale
TypeScript
Stelle
520
Fork
70
Merge medio
23h 35m
PR unite (30g)
39

Guida per i contributori

Apri la guida per i contributori

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 solidjs/solid-vite-plugin

Tutte le issue di solidjs/solid-vite-plugin

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.