Rescuing a 3D weather viz from AI Studio scaffold
Cleaning up an AI Studio 3D weather visualization by removing dead dependencies and fixing a React ecosystem version mismatch.
A 3D weather visualization for Boston, Cincinnati, and Louisville — procedural WebGL cityscape, live Open-Meteo data, falling snow particles — arrived from AI Studio with a solid 560-line core buried under 9 dead dependencies, 48 CVEs, and a README telling users to configure a Gemini API key that nothing in the code uses. The recon audit traced every import to separate real dependencies from scaffold cargo. The rescue stripped the dead weight, but upgrading Next.js for security kicked off a cascade: React 19 bundled inside Next.js 16 was invisible to the top-level React 18 install, and React Three Fiber 8 collapsed at the boundary. The fix was upgrading the entire Three.js ecosystem in one shot — React 19, R3F 9, drei 10, Three.js 0.185 — until npm install came back with 0 vulnerabilities, 0 peer warnings, and the snow scene rendered clean.
Timeline
Half the package.json was lying to me. An AI Studio 3D weather viz — procedural WebGL cityscape, live Open-Meteo snow data, falling particle system — and the README tells users to set a GEMINI_API_KEY. Traced every import in all 532 lines of source: @google/genai is never imported. Neither is framer-motion (listed twice, versions 11 and 12). Neither is uuid (imported on line 1 of weather.ts, never called). @hookform/resolvers, class-variance-authority, tw-animate-css, firebase-tools, @tailwindcss/typography — all scaffold cargo from the export template. The animation classes in the JSX (animate-in fade-in slide-in-from-bottom-4) compile to nothing because neither Tailwind animation plugin is wired up. A Math.random() call inside the render loop made building windows flicker on every frame. The core app is 560 lines of real code doing real work — the rest was noise.
Upgrading Next.js to fix 48 CVEs broke everything I'd just cleaned up. The security audit on the weather viz export showed 48 vulnerabilities including 4 critical — all rooted in Next.js 14.2.15 and its transitive postcss and glob. Every Next.js 14.x version was in the vulnerable range, so I jumped to 16.3.0. Build passed. Then ReactCurrentBatchConfig is not defined at prerender time. The culprit: Next.js 16 bundles React 19.3 internally, but my package.json had React 18.3.1, and React Three Fiber 8.x only supports react >=18 <19. Two different Reacts in the same build. No bridge version exists — R3F 9 is React 19 only. So I upgraded the entire ecosystem in one shot: React 19, R3F 9.7.0, drei 10.7.7, Three.js 0.185. Clean npm install — 0 vulnerabilities, 0 peer warnings, no --legacy-peer-deps. Build passed. Dev server booted. 3D snow scene rendered. From 48 CVEs to zero in one dependency cascade.