Component Duplication Upon Dev Server Reload

After triggering hot reload from App.jsx 3 times.

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",
},
});
`

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.