#1080·react-bits

[BUG]: GlassSurface Tailwind JS variant crashes - TS generics in .jsx (useRef < HTMLDivElement > null)

Author: MauryaQbitCreated Sep 13, 2026Updated Sep 13, 2026

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 — 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:
    <GlassSurface width={200} height={80}>hello</GlassSurface>
    
  3. 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-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

  • 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).