Not working with React 19

[organdonor47]

I am trying to get this package working in React 19 + nextjs v15 but get the folllowing error.

Cannot read properties of undefined (reading 'ReactCurrentDispatcher')
@whatisjery/react-fluid-distortion/dist/index.es.js (199:1)

component:

  <Canvas
    style={{
      position: 'fixed',
      top: 0,
      left: 0,
      height: '100vh',
      width: '100vw',
      background: '#efa29a',
    }}
  >
    <EffectComposer>
      <Fluid />
    </EffectComposer>
  </Canvas>

(simplified) package.json is:

 "@react-three/drei": "^9.120.4",
 "@react-three/fiber": "9.0.0-rc.1",
 "@react-three/postprocessing": "^2.16.3",
 "@whatisjery/react-fluid-distortion": "^1.3.6",
 "leva": "^0.9.35",
 "react": "19.0.0-rc.1",
 "react-dom": "19.0.0-rc.1",

any suggestions at all? found this issue related to the https://github.com/pmndrs/react-postprocessing/issues/301, so maybe there is something related there?

[abdallahabusidu]

Next.js 15 is using React 19. React 19 changes its secret internal API from SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED to __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.

React Three Fiber uses those React secret internals to access ReactCurrentOwner and thus is no longer compatible with React 19 (this should be expected since you are already using something that would result in YOU_WILL_BE_FIRED).

This is not the issue of React or Next.js, it is a bug of React Three Fiber. Please submit an issue there instead.

[whatisjery]

@organdonor47

https://github.com/whatisjery/react-fluid-distortion/issues/9#issuecomment-2807802796