Persistent 'ReactCurrentOwner' TypeError with React Three Fiber in Next.js 15.3.3 App (Firebase Studio)

I'm encountering a persistent TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner') when trying to integrate React Three Fiber (R3F) into my Next.js application, which is being developed in Firebase Studio. I've tried numerous troubleshooting steps but haven't been able to resolve it.

Problem Description:

The application fails to render the R3F Canvas, throwing the following error in the browser console:

TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')
    at $$$reconciler (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:498:46)
    at createRenderer (webpack-internal:///(app-pages-browser)/./node_modules/@react-three/fiber/dist/events-776716bd.esm.js:271:77)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@react-three/fiber/dist/events-776716bd.esm.js:1778:5)
    // ... (rest of the stack trace as you provided, e.g.:)
    at (app-pages-browser)/./node_modules/@react-three/fiber/dist/events-776716bd.esm.js (https://6000-firebase-studio-1749286620707.cluster-3gc7bglotjgwuxlqpiut7yyqt4.cloudworkstations.dev/_next/static/chunks/_app-pages-browser_src_components_animations_ActualSophisticatedScene_tsx.js:68:1)
    at options.factory (...)
    at __webpack_require__ (...)
    // ...
    at ClientPageRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/client-page.js:20:50)

Environment Details:

Next.js: 15.3.3 React: 18.3.1 React DOM: 18.3.1 @react-three/fiber: alpha (e.g., ^8.17.0-alpha.0 - specify the exact alpha version if known from your lock file) @react-three/drei: ^9.105.6 (or adjust to match the version installed alongside R3F alpha) three: ^0.164.1 (or adjust to match the version installed) Development Environment: Firebase Studio (Cloud-based IDE) Node Version: v20.19.0 Browser: Chromium: 137.0.7151.68 Using Next.js App Router. Relevant Code Snippets:

My R3F scene component (ActualSophisticatedScene.tsx):

'use client';

import React, { useState, useEffect, useMemo, useRef, Suspense } from 'react';
import { Canvas, useFrame, extend, useThree } from '@react-three/fiber';
import { OrbitControls, Text, Line, Html } from '@react-three/drei';
import * as THREE from 'three';

// Scene Settings
const LANDSCAPE_WIDTH = 200;
const LANDSCAPE_DEPTH = 150;
const HILL_AMPLITUDE = 8;
const HILL_FREQUENCY = 0.05;
const NUM_DATA_STREAMS = 60;
const LANDSCAPE_COLOR_DARK_BLUE = new THREE.Color('#0A101A');
const LANDSCAPE_COLOR_EARTH_TONE = new THREE.Color('#101C2A');
const STREAM_COLOR_CYAN = new THREE.Color('#00FFFF');
const STREAM_COLOR_WHITE = new THREE.Color('#E0E0E0');
const ENERGY_POINT_COLOR = new THREE.Color('#FFFFFF');
const SPROUT_STEM_COLOR = new THREE.Color('#34D399');
const SPROUT_LEAF_COLOR = new THREE.Color('#6EE7B7');
const SPROUT_GLOW_COLOR = new THREE.Color('#FFFFFF');


// Landscape Component
const Landscape: React.FC = () => {
  const meshRef = useRef<THREE.Mesh>(null!);
  const geometry = useMemo(() => {
    const geom = new THREE.PlaneGeometry(LANDSCAPE_WIDTH, LANDSCAPE_DEPTH, 40, 30);
    const { array } = geom.attributes.position;
    for (let i = 0; i < array.length; i += 3) {
      const x = array[i];
      const y = array[i + 1];
      array[i + 2] = (Math.sin(x * HILL_FREQUENCY) + Math.cos(y * HILL_FREQUENCY * 0.7)) * HILL_AMPLITUDE * (1 - Math.abs(x / LANDSCAPE_WIDTH)*0.5) ;
    }
    geom.computeVertexNormals();
    return geom;
  }, []);

  return (
    <mesh ref={meshRef} geometry={geometry} rotation={[-Math.PI / 2, 0, 0]} position={[0, -HILL_AMPLITUDE -5, 0]}>
      <meshStandardMaterial color={LANDSCAPE_COLOR_EARTH_TONE} flatShading={true} metalness={0.2} roughness={0.8} />
    </mesh>
  );
};

// DataStream Component
interface DataStreamProps {
  id: string;
  startPoint: THREE.Vector3;
  midPoint: THREE.Vector3;
  endPoint: THREE.Vector3;
  color: THREE.Color;
  animationPhase: 'tracing' | 'converging' | 'fading';
}

const DataStream: React.FC<DataStreamProps> = ({ startPoint, midPoint, endPoint, color, animationPhase }) => {
  const lineRef = useRef<any>();
  const [currentPoints, setCurrentPoints] = useState<THREE.Vector3[]>([startPoint, startPoint]);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    setVisible(true);
  }, []);

  useFrame((_state, delta) => {
    if (!lineRef.current || !visible) return;
    const speed = animationPhase === 'converging' ? 25 : 15;
    let progress = (lineRef.current.userData.progress || 0) + speed * delta;
    lineRef.current.userData.progress = progress;
    let curve;
    if (animationPhase === 'tracing') {
      curve = new THREE.QuadraticBezierCurve3(startPoint, midPoint, endPoint);
    } else {
      curve = new THREE.LineCurve3(startPoint, endPoint);
    }
    const pointsOnCurve = Math.min(Math.floor(progress), 50);
    if (pointsOnCurve < 2) {
      setCurrentPoints([startPoint, startPoint]);
      return;
    }
    const newPoints = curve.getPoints(pointsOnCurve -1);
    setCurrentPoints(newPoints);
    if (animationPhase === 'fading') {
      (lineRef.current.material as THREE.LineBasicMaterial).opacity -= 2.5 * delta;
      if ((lineRef.current.material as THREE.LineBasicMaterial).opacity <= 0) {
        setVisible(false);
      }
    }
  });

  if (!visible) return null;
  return <Line ref={lineRef} points={currentPoints} color={color} lineWidth={1.5} transparent opacity={animationPhase === 'fading' ? (lineRef.current?.material.opacity || 1) : 1} />;
};

// Sprout Component
const Sprout: React.FC<{ onAnimationComplete: () => void }> = ({ onAnimationComplete }) => {
  const groupRef = useRef<THREE.Group>(null!);
  const [scale, setScale] = useState(0.01);
  const [phase, setPhase] = useState<'growing' | 'pulsing' | 'stable'>('growing');
  useEffect(() => {
    let growingTimeout: NodeJS.Timeout;
    if (phase === 'growing') growingTimeout = setTimeout(() => setPhase('pulsing'), 1200);
    let pulsingTimeout: NodeJS.Timeout;
    if (phase === 'pulsing') pulsingTimeout = setTimeout(() => { setPhase('stable'); onAnimationComplete(); }, 1500);
    return () => { clearTimeout(growingTimeout); clearTimeout(pulsingTimeout); };
  }, [phase, onAnimationComplete]);

  useFrame((_state, delta) => {
    if (!groupRef.current) return;
    if (phase === 'growing') setScale(s => Math.min(s + 1.0 * delta, 1));
    else if (phase === 'pulsing') groupRef.current.scale.setScalar(1 + Math.sin(_state.clock.elapsedTime * 5) * 0.1);
    else if (phase === 'stable') groupRef.current.scale.setScalar(1);
    groupRef.current.scale.set(scale, scale, scale);
  });

  return (
    <group ref={groupRef} position={[0, -HILL_AMPLITUDE -5 + 0.5, 0]}>
      <mesh position={[0, 1.5, 0]}>
        <cylinderGeometry args={[0.1, 0.15, 3, 8]} />
        <meshStandardMaterial color={SPROUT_STEM_COLOR} emissive={SPROUT_STEM_COLOR} emissiveIntensity={0.3} roughness={0.7} metalness={0.1} />
      </mesh>
      {[...Array(5)].map((_, i) => (
        <mesh key={i} position={[Math.sin((i / 5) * Math.PI * 2) * (1 + (i%2)*0.3), 3 + Math.cos((i / 5) * Math.PI) * 0.5, Math.cos((i / 5) * Math.PI * 2) * (1 + (i%2)*0.3)]} rotation={[Math.random() * 0.5 - 0.25, (i / 5) * Math.PI * 2, Math.PI / 4 + (Math.random() * 0.3 - 0.15)]}>
          <planeGeometry args={[1.5, 0.8]} />
          <meshStandardMaterial color={SPROUT_LEAF_COLOR} emissive={SPROUT_LEAF_COLOR} emissiveIntensity={0.4} side={THREE.DoubleSide} roughness={0.6} metalness={0.1}/>
        </mesh>
      ))}
      <pointLight color={SPROUT_GLOW_COLOR} intensity={phase === 'pulsing' ? 30 : 15} distance={10} decay={2} position={[0,2,0]}/>
    </group>
  );
};

// Main Scene Logic for R3F
const SceneContent: React.FC = () => {
  const { camera } = useThree();
  const [animationPhase, setAnimationPhase] = useState<'initial' | 'tracing' | 'converging' | 'blossoming' | 'stable'>('initial');
  const [showSprout, setShowSprout] = useState(false);
  const [showTagline, setShowTagline] = useState(false);

  const streams = useMemo(() => Array.from({ length: NUM_DATA_STREAMS }).map((_, i) => {
    const angle = (i / NUM_DATA_STREAMS) * Math.PI * 2;
    const radius = LANDSCAPE_WIDTH / 2.5 + (Math.random() - 0.5) * 20;
    const startX = Math.cos(angle) * radius;
    const startZ = Math.sin(angle) * radius;
    const startY = (Math.sin(startX * HILL_FREQUENCY) + Math.cos(startZ * HILL_FREQUENCY * 0.7)) * HILL_AMPLITUDE + Math.random() * 3 - 1.5 - (HILL_AMPLITUDE + 5);
    const midX = startX * 0.4 + (Math.random() - 0.5) * 30;
    const midZ = startZ * 0.4 + (Math.random() - 0.5) * 30;
    const midY = startY * 0.5 + (Math.random() * 5 - 2.5);
    return { id: `stream-${i}`, startPoint: new THREE.Vector3(startX, startY, startZ), midPoint: new THREE.Vector3(midX, midY, midZ), endPoint: new THREE.Vector3(0, - (HILL_AMPLITUDE + 5) + 1, 0), color: i % 2 === 0 ? STREAM_COLOR_CYAN : STREAM_COLOR_WHITE };
  }), []);

  useEffect(() => {
    camera.position.set(0, 25, 55);
    camera.lookAt(0, 0, 0);
    const t0 = setTimeout(() => setAnimationPhase('tracing'), 500);
    const t1 = setTimeout(() => setAnimationPhase('converging'), 4500);
    const t2 = setTimeout(() => { setAnimationPhase('blossoming'); setShowSprout(true); }, 7000);
    return () => { clearTimeout(t0); clearTimeout(t1); clearTimeout(t2);};
  }, [camera]);

  const handleSproutAnimationComplete = () => { setAnimationPhase('stable'); setTimeout(() => setShowTagline(true), 500); };

  const energyPointRef = useRef<THREE.Mesh>(null!);
  useFrame((_state, delta) => {
    if (animationPhase === 'converging' && energyPointRef.current) {
      energyPointRef.current.scale.setScalar(Math.max(0.1, energyPointRef.current.scale.x + 2 * delta));
      (energyPointRef.current.material as THREE.MeshBasicMaterial).opacity = Math.min(1, (energyPointRef.current.material as THREE.MeshBasicMaterial).opacity + 1.5 * delta);
    } else if (animationPhase === 'blossoming' && energyPointRef.current) {
      energyPointRef.current.scale.setScalar(Math.max(0, energyPointRef.current.scale.x - 5 * delta));
      (energyPointRef.current.material as THREE.MeshBasicMaterial).opacity = Math.max(0, (energyPointRef.current.material as THREE.MeshBasicMaterial).opacity - 3 * delta);
    }
  });

  return (
    <>
      <ambientLight intensity={0.3} color={LANDSCAPE_COLOR_DARK_BLUE}/>
      <directionalLight position={[30, 50, 30]} intensity={1.2} color={new THREE.Color("#AADDBB")} castShadow />
      <pointLight position={[0, 20, 0]} intensity={15} color={STREAM_COLOR_CYAN} distance={100} decay={1.5}/>
      <fog attach="fog" args={[LANDSCAPE_COLOR_DARK_BLUE, 40, 120]} />
      <color attach="background" args={[LANDSCAPE_COLOR_DARK_BLUE]} />
      <Landscape />
      {streams.map(stream => (
        <DataStream key={stream.id} {...stream} animationPhase={ animationPhase === 'tracing' ? 'tracing' : animationPhase === 'converging' ? 'converging' : (animationPhase === 'blossoming' || animationPhase === 'stable') ? 'fading' : 'tracing' }/>
      ))}
      {(animationPhase === 'converging' || animationPhase === 'blossoming') && (
        <mesh ref={energyPointRef} position={[0, -(HILL_AMPLITUDE + 5) + 1.5, 0]} scale={0.1}>
          <sphereGeometry args={[1, 16, 16]} />
          <meshBasicMaterial color={ENERGY_POINT_COLOR} transparent opacity={0} fog={false}/>
        </mesh>
      )}
      {showSprout && <Sprout onAnimationComplete={handleSproutAnimationComplete} />}
      {showTagline && (
         <Text color={STREAM_COLOR_WHITE} fontSize={1.2} maxWidth={200} lineHeight={1} letterSpacing={0.02} textAlign="center" anchorX="center" anchorY="middle" position={[0, -10, 25]} rotation={[-0.2,0,0]} font="/fonts/Inter-Regular.woff">
            FarmIT: Cultivating the Future.
        </Text>
      )}
      {/* <OrbitControls /> */}
    </>
  );
};


const ActualSophisticatedScene: React.FC = () => {
  const [isClientMounted, setIsClientMounted] = useState(false);

  useEffect(() => {
    setIsClientMounted(true);
  }, []);

  if (!isClientMounted) {
    // This fallback is shown before client-side mounting, or if R3F is not used/commented out.
    return (
      <div className="w-full h-full flex flex-col items-center justify-center bg-muted/30 p-8 text-center">
        <p className="text-lg font-semibold text-primary mb-2">3D Animation Placeholder</p>
        <p className="text-sm text-muted-foreground">
          The React Three Fiber (R3F) 3D animation is intended here.
        </p>
        <p className="text-sm text-muted-foreground mt-1">
          If you're seeing this after the page load, there might be an issue with the R3F rendering.
        </p>
      </div>
    );
  }
  
  // Attempt to render R3F Canvas only on the client
  return (
    <div className="w-full h-full">
      <Canvas
        shadows
        camera={{ position: [0, 25, 60], fov: 50, near: 0.1, far: 200 }}
        gl={{ antialias: true, alpha: false }}
      >
        <Suspense fallback={<Html center><p className="text-primary-foreground">Loading 3D Scene...</p></Html>}>
          <SceneContent />
        </Suspense>
      </Canvas>
    </div>
  );
};

export default ActualSophisticatedScene;

This scene is then dynamically imported into my homepage (src/app/page.tsx) via SophisticatedHeroAnimation.tsx which also uses dynamic import:

// In src/app/page.tsx within a HeroSection component
const SophisticatedHeroAnimation = dynamic(
  () => import('@/components/animations/SophisticatedHeroAnimation'),
  {
    ssr: false,
    loading: () => <div className="w-full h-[500px] md:h-[600px] bg-muted/30 flex items-center justify-center"><p className="text-muted-foreground">Loading Animation...</p></div>
  }
);

// SophisticatedHeroAnimation.tsx itself dynamically loads ActualSophisticatedScene.tsx:
// const ActualSophisticatedScene = dynamic(() => import('@/components/animations/ActualSophisticatedScene'), { ssr: false, /* ...loading */ });


function HeroSection() {
  // ...
  return (
    <section className="relative text-center bg-gradient-to-br from-primary/10 via-background to-background overflow-hidden">
      <div className="absolute inset-0">
        <div className="w-full h-[500px] md:h-[600px]"> {/* Ensured dimensions */}
          <SophisticatedHeroAnimation />
        </div>
      </div>
      {/* ... rest of hero content ... */}
    </section>
  );
}

Troubleshooting Steps Taken:

Verified 'use client';: Ensured all R3F components and their direct parents are client components. Dependency Versions: Tried various combinations of Next.js, React, R3F (stable and alpha), Drei, and Three.js versions. Currently on the versions listed above. Dynamic Imports: Used next/dynamic with ssr: false for the R3F scene and its direct wrapper. Simplified Scene: Tested with a very basic R3F scene (e.g., just a spinning cube), and the error still occurs. Client-Side Mount Check: Added useEffect with useState in ActualSophisticatedScene.tsx to ensure it only attempts to render R3F content after mounting on the client. Direct Loading: Attempted dynamically loading the ActualSophisticatedScene.tsx directly in page.tsx to simplify the component tree. Node Modules: Cleared node_modules and lock files (package-lock.json/pnpm-lock.yaml) and reinstalled. Clean Next.js Cache: Deleted the .next folder. None of these steps have resolved the ReactCurrentOwner error. The error seems to originate deep within react-reconciler when R3F attempts to create its renderer.

Question to the Community:

Has anyone encountered a similar persistent ReactCurrentOwner error with React Three Fiber specifically in a Next.js (App Router) environment, particularly when developing in a cloud-based IDE like Firebase Studio? Are there known incompatibilities or specific configurations required for R3F within such an environment that I might be missing? Could this be related to how Webpack or the Next.js compiler is configured/behaving in Firebase Studio? Any suggestions for further debugging or potential workarounds? I'm trying to create a sophisticated 3D hero animation, and this error is completely blocking progress. Any insights or help would be greatly appreciated!

Thanks in advance.