The error is Cannot read properties of undefined (reading 'ReactCurrentOwner') when importing from @react-three/fiber. This is a common React version mismatch issue with R3F. The fix is to ensure the 3D scene component is properly lazy-loaded and that we use compatible versions. Let me also check the remaining components for any issues:
The ReactCurrentOwner error is caused by a React version incompatibility between @react-three/fiber v8 and React 19. I need to upgrade to @react-three/fiber v9 and @react-three/drei v10 which support React 19. Let me also check the three version and the Trail component import:
Now I know the fix. @react-three/fiber v9 and @react-three/drei v10 support React 19. Let me also update three to a compatible version:
Now let me also update the hero-scene.tsx to fix potential API changes in the v9/v10 APIs. The Trail component was removed from drei v10 and some imports changed. Let me rewrite the scene to be robust:
Now let me also check the remaining component files for any issues:
All the other components look fine. The root cause was @react-three/fiber v8 and @react-three/drei v9 not being compatible with React 19.2. Let me verify the Stars and other drei imports are available in v10:
I see that @react-three/drei v10 is compatible with R3F v9. The Stars, Float, MeshDistortMaterial, and Sphere are all still available. The Trail component was already removed in my updated hero-scene. Let me also check if there are any import issues with the v9 Canvas API:
Good, the config looks fine. The transpilePackages config is no longer needed for R3F v9. Let me also add a Suspense fallback around the 3D Canvas to prevent hydration issues and make loading smoother:
The fix was straightforward: the @react-three/fiber v8 and @react-three/drei v9 packages are incompatible with React 19.2, which was causing the ReactCurrentOwner undefined error at module evaluation time. I upgraded to @react-three/fiber v9 and @react-three/drei v10 (along with three v0.175 and matching types), removed the Trail component that was dropped in drei v10, added a Suspense wrapper inside the Canvas for safe async loading, and memoized the Object3D dummy in the particle system to avoid per-frame allocations.
The provided image is the Verka brand logo: bold white "verka" text with a registered trademark symbol on a rounded blue background, with the tagline "Har Din Da, Har Dil Da" in white below.
Let me save the image and update the experience section:
Now I'll add a logo field to the Verka experience entry and render it in the card:
Now update the card rendering to show the logo instead of the briefcase icon when a logo is present:
I saved the Verka logo to public/images/verka-logo.png and updated the experience section to conditionally render company logos. The Verka Milk Plant card now displays the official Verka logo in a nicely rounded container instead of the generic briefcase icon, while the Grazitti entry keeps the default icon since no logo was provided.
Create a modern, highly professional personal portfolio website using Next.js and Tailwind CSS with smooth animations and 3D effects.
Design Requirements:
Use Framer Motion for animations.
Use Tailwind CSS for styling.
Use React Three Fiber or simple 3D CSS transforms for 3D effects.
SEO optimized structure.
Clean and well-structured component-based code.
Make the design extremely professional, visually striking, minimal yet futuristic,
You can send messages while the preview loads