Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Component Duplication Upon Dev Server Reload

オープン
  • 何か問題がありますか？
#202 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
52/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
活発
技術スタック
javascript, vite
領域
frontend, tooling

調査の方向性

vite.config.js に示されている設定と、記載されている Solid/Vite の依存関係を使って、App.jsx と index.jsx の再読み込みシーケンスで問題を再現します。まず、index.jsx ではないファイルを保存するとルーティングされたコンポーネントが重複するかを確認し、ホットリロードを繰り返してもコンポーネントツリーが一度だけレンダリングされるようになった時点で問題が解決したとみなします。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
522
フォーク
72
平均マージ
20時間 1分
マージ済み PR（30日）
31

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

solidjs/solid-vite-plugin のほかの issue

solidjs/solid-vite-plugin の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。