[BUG]: GlassSurface Tailwind JS variant crashes - TS generics in .jsx (useRef < HTMLDivElement > null)
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:
// 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 — correctsrc/ts-default/Components/GlassSurface/GlassSurface.tsx:74-79:useRef<HTMLDivElement>(null)— correct TSsrc/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
- Use
src/tailwind/Components/GlassSurface/GlassSurface.jsx(Tailwind JS variant). - Render minimally:
<GlassSurface width={200} height={80}>hello</GlassSurface> - Observe crash:
ReferenceError: HTMLDivElement is not defined.
Minimal logic repro without React/browser:
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:
- 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-bitsmain@3a1c7f2(verified 2026-09-13) - Variant affected:
Tailwind JSonly (GlassSurface-JS-TW);Content JS,TS-Default,TS-Tailwindverified healthy - Browsers: all
Validations
- I have checked other issues to see if my issue was already reported or addressed
- Checked: search
GlassSurface in:title,bodyreturns 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).
Source: DavidHDev/react-bits