MauryaQbit
## Bug Description The Tailwind JavaScript variant of `GlassSurface` crashes on render because it contains TypeScript generic syntax with spaces in a `.jsx` file. Every ref initialization is broken: ```js // src/tailwind/Components/GlassSurface/GlassSurface.jsx:50-55 const containerRef = useRef < HTMLDivElement > null; const feImageRef = useRef < SVGFEImageElement > null; const redChannelRef = useRef < SVGFEDisplacementMapElement > null; const greenChannelRef = useRef < SVGFEDisplacementMapElement > null; const blueChannelRef = useRef < SVGFEDisplacementMapElement > null; const gaussianBlurRef = useRef < SVGFEGaussianBlurElement > null; ``` In plain JS this parses as comparison chain `(useRef < HTMLDivElement) > null`, and `HTMLDivElement` is not defined, so rendering throws `ReferenceError: HTMLDivElement is not defined` before any glass effect runs. All downstream uses (`containerRef.current?.getBoundingClientRect()`, `feImageRef.current?.setAttribute`, `ResizeObserver`) never get a real ref. Healthy comparisons on the same commit: - `src/content/Components/GlassSurface/GlassSurface.jsx:34-39`: `useRef(null)` x6 — correct - `src/ts-default/Components/GlassSurface/GlassSurface.tsx:74-79`: `useRef<HTMLDivElement>(null)` — correct TS - `src/ts-tailwind/Components/GlassSurface/GlassSurface.tsx:90-95`: correct TS The broken code also ships in the registry artifact `public/r/GlassSurface-JS-TW.json`, so CLI installs (`shadcn`/`jsrepo`) get the crash too. ## Steps to Reproduce 1. Use `src/tailwind/Components/GlassSurface/GlassSurface.jsx` (Tailwind JS variant). 2. Render minimally: ```jsx <GlassSurface width={200} height={80}>hello</GlassSurface> ``` 3. Observe crash: `ReferenceError: HTMLDivElement is not defined`. Minimal logic repro without React/browser: ```js function useRef(v) { return { current: v }; } const containerRef = useRef < HTMLDivElement > null; // -> ReferenceError: HTMLDivElement is not defined ``` ESLint passes on this file, which is why it is easy to miss — it is a runtime scoping error, not a lint error. ## Expected Behavior Tailwind JS variant behaves like `content` JS: refs initialize to `{ current: null }`, component mounts, SVG displacement filter attaches, no exception. ## Actual Behavior Render throws immediately on the first `useRef < ... > null` line. The Tailwind JS variant is completely unusable; the registry copy is equally broken. ## Root Cause Copy-paste from the TS variant into `.jsx` without stripping generics (and with spaces added: `useRef < T > null` instead of `useRef<T>(null)`). JS has no generics, so `< HTMLDivElement >` becomes comparison operators referencing undefined DOM-type globals. ## Suggested Fix In `src/tailwind/Components/GlassSurface/GlassSurface.jsx:50-55` only: ```diff - const containerRef = useRef < HTMLDivElement > null; - const feImageRef = useRef < SVGFEImageElement > null; - const redChannelRef = useRef < SVGFEDisplacementMapElement > null; - const greenChannelRef = useRef < SVGFEDisplacementMapElement > null; - const blueChannelRef = useRef < SVGFEDisplacementMapElement > null; - const gaussianBlurRef = useRef < SVGFEGaussianBlurElement > null; + const containerRef = useRef(null); + const feImageRef = useRef(null); + const redChannelRef = useRef(null); + const greenChannelRef = useRef(null); + const blueChannelRef = useRef(null); + const gaussianBlurRef = useRef(null); ``` Then sync `public/r/GlassSurface-JS-TW.json` the same way (currently ships the identical broken lines). ## Environment / Version - Repo: `DavidHDev/react-bits` `main` @ `3a1c7f2` (verified 2026-09-13) - Variant affected: `Tailwind JS` only (`GlassSurface-JS-TW`); `Content JS`, `TS-Default`, `TS-Tailwind` verified healthy - Browsers: all ## Validations - [x] I have checked other issues to see if my issue was already reported or addressed - Checked: search `GlassSurface in:title,body` returns 5 closed items (#1021 resize effect, #755 responsive fallback proposal, #325 ID collision, #324 double visibility, plus unrelated Carousel #978) — none cover TS-generics-in-JSX crash. Open issues are only #1078/#1079 (ScrollVelocity).