dev: Vue pages of certain patterns return 500 ($RefreshSig$ regression in plugin-react v6 + Vite 8 + Astro 7 alpha)

[masuP9]

概要

npm run dev で以下の Vue ページが ReferenceError: `$RefreshSig$ is not defined` で HTTP 500 を返します:

• `/patterns/alert/vue/`
• `/patterns/checkbox/vue/`
• `/patterns/combobox/vue/`
• `/patterns/disclosure/vue/`
• `/patterns/menu-button/vue/`
• `/patterns/menubar/vue/`
• `/patterns/slider/vue/`
• `/patterns/slider-multithumb/vue/`
• `/patterns/toolbar/vue/`

(他フレームワーク版 / 他 pattern は #169 で構造側の暫定対応済み)

原因

依存アップグレード (165e32b) 後の組み合わせ:

• `@vitejs/plugin-react` v5 (Babel ベース) → v6 (Oxc ベース)
• `vite` 7 → 8 (oxc plugin 経由で Fast Refresh transform を適用)
• `astro` 6 → 7.0.0-alpha.0
• `@astrojs/{react,vue}` 5/6 → alpha

plugin-react v6 のデフォルト `include = /\.[tj]sx?$/` が、Vite 8 の `makeIdFiltersToMatchWithQuery` で末尾 `$` を `(?:\?.*)?$` に書き換えられた結果、Vue SFC `<script setup lang="ts">` の仮想 ID (`Foo.vue?vue&type=script&setup=true&lang.ts`) にもマッチする。
Vite が transform 時に React Fast Refresh の `$RefreshSig$()` 呼び出しを注入し、SSR module-runner で評価される際に `$RefreshSig$` が未定義のままなので ReferenceError で 500 になる。

検証

`fadd058` (Astro 6 + Vite 7 + plugin-react v5.1.4 の上記アップグレード直前 commit) を worktree で立ち上げると全 128 pattern×framework ページが 200 を返す。`165e32b` 以降の依存スタックでのみ再現する dev limited regression。

本番 / CI で気づかれなかった理由

`playwright.config.ts:42-43`:

In CI: Uses `npm run preview` to serve pre-built files from dist/
Locally: Uses `npm run dev` for hot reload during development

production build では Fast Refresh transform 自体が走らないため再現せず、CI も `npm run preview` ベースなので気づけない構造。

影響

dev 限定。production build / preview / CI / GitHub Pages デプロイは全て正常。

構造側の暫定対応 (#169)

各 pattern の `DemoSection.astro` を framework 別ファイルに分割し、React/Svelte/Astro ページから Vue SFC 評価ルートを切る。これで 24 ページが救えた。
ただし Vue ページは Vue SFC を本来評価する必要があるため、構造側では救えない のが本 issue で残っている分。

試したが効かなかった user-level の対策

• `react({ include: /\.(jsx|tsx)$/, exclude: [/\.vue(\$|\?)/, /\.svelte(\$|\?)/] })`
• `vite.oxc.jsxRefreshInclude: /\.(jsx|tsx)$/`
• `vite.oxc.jsx.refresh: false` (これは存在しないオプションで no-op)

plugin-react v6 が `config` フックで Vite の `oxc.jsxRefreshInclude/Exclude` を上書きしており、user 側からの絞り込みが反映されない構造になっている。

次のアクション候補

• 最小再現リポジトリを作成 (Astro 7 + Vite 8 + plugin-react 6 + plugin-vue + 1 つの `<script setup lang="ts">` を持つ `.vue`)
• vitejs/vite-plugin-react に v5 → v6 regression として issue を立てる (もしくは vitejs/vite の oxc plugin / withastro/astro)
• upstream が修正されたら fix(dev): split DemoSection.astro per-framework to avoid plugin-react v6 $RefreshSig$ regression #169 の framework 別分割を revert する判断 (それまでは Vue ページの動作不能を許容)

関連

• PR fix(dev): split DemoSection.astro per-framework to avoid plugin-react v6 $RefreshSig$ regression #169 — 構造側暫定対応 (本 issue を partial に緩和)
• 元の regression を導入した commit: 165e32b `chore(deps): upgrade to Astro 7.0.0-alpha.0 and Vite 8 ecosystem`