Cannot read properties of undefined (reading 'A')

[prabhatkashyap902]

@whatisjery_react-fl…05&v=0035794f:10819 Uncaught TypeError: Cannot read properties of undefined (reading 'A') at V3 (@whatisjery_react-fl…v=0035794f:10819:19) at re2 (@whatisjery_react-fl…v=0035794f:10915:29)

what kind of issue is this?

import React, { useState, useEffect } from "react";
import { Canvas } from "@react-three/fiber";
import { EffectComposer } from "@react-three/postprocessing";
import { Fluid, useConfig } from "@whatisjery/react-fluid-distortion";

const PaintAiModel = () => {
  const config = useConfig();

  return (
    <div className="w-full h-full">
      <Canvas
        style={{
          top: 0,
          left: 0,
          height: "100vh",
          width: "100vw",
          //   backgroundColor:'black'
        }}
      >
        <EffectComposer>
          {/* Fluid Effect */}
          <Fluid {...config} />
        </EffectComposer>
      </Canvas>
    </div>
  );
};

export default PaintAiModel;

with this version

"dependencies": {
    "@react-three/drei": "^9.122.0",
    "@react-three/fiber": "^8.18.0",
    "@react-three/postprocessing": "^2.19.1",
    "@splinetool/loader": "^1.0.54",
    "@splinetool/r3f-spline": "^1.0.2",
    "@tsparticles/react": "^3.0.0",
    "@tsparticles/slim": "^3.8.1",
    "@whatisjery/react-fluid-distortion": "^1.4.0",
    "framer-motion": "^11.18.2",
    "leva": "^0.9.36",
    "locomotive-scroll": "^4.1.4",
    "postprocessing": "^6.37.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-dropdown": "^1.11.0",
    "react-fast-marquee": "^1.6.5",
    "react-icons": "^5.4.0",
    "styled-components": "^6.1.15",
    "three": "^0.174.0"

[Nanae-j]

Hello! I had the exact same problem...

I used to create projects in Astro using react. Thinking it was some kind of dependency problem, I rebuilt the project with the latest version of Next.js.

The current version is below. This is what works in my environment. Any help would be appreciated.

"dependencies": { "@react-three/drei": "^10.0.5", "@react-three/postprocessing": "^3.0.4", "@whatisjery/react-fluid-distortion": "^1.4.0", "leva": "^0.10.0", "next": "15.2.4", "postprocessing": "^6.37.1", "react": "^19.0.0", "react-dom": "^19.0.0", "tunnel-rat": "^0.1.2" },

[Konstantin9658]

I have the same problem, any progress?

[whatisjery]

@Konstantin9658 @Nanae-j @prabhatkashyap902

From the react-three-fiber documentation :

Three-fiber is a React renderer, it must pair with a major version of React, just like react-dom, react-native, etc. @react-three/fiber@8 pairs with react@18, @react-three/fiber@9 pairs with react@19.

Errors like :

Uncaught TypeError: Cannot read properties of undefined (reading 'A')

are caused by a React version mismatch. You're using React 18 with newer versions of those libraries, and that's what's breaking.

So, I'd recommend updating to React 19.

[Konstantin9658]

Thanks for the quick reply!

Indeed, updating to version 19 of React helped me. At first I neglected it and updated only version three. Thanks again for the tip