After triggering hot reload from App.jsx 3 times.
After subsequently triggering hot reload from index.jsx once.
- Created a new project using
npx degit solidjs/templates/js my-app
npm installnpm i @solidjs/routernpm run dev- In index.jsx
import { Route, Router } from '@solidjs/router';
- 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);
npm run dev- Trigger hot reload via saving VSCode file
- 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",
},
});
`
After triggering hot reload from App.jsx 3 times.
After subsequently triggering hot reload from index.jsx once.
npx degit solidjs/templates/js my-appnpm installnpm i @solidjs/routernpm run devimport { Route, Router } from '@solidjs/router';render( () =>( // <Router root={App} /> <Router> <Route path="/" component={App} /> <Route path="/projects" component={Projects} /> <Route path="/projects/:id" component={Project} /> </Router> ), root);npm run devAdditional Considerations:
npm install tailwindcss @tailwindcss/viteEDIT 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:
Dev Deps:
Deps:
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",
},
});
`