Thank you for working on this 👍

Regarding the versions of the packages, maybe it would be best to use the same values as does r3f v9.0.0-rc.1, this is what they use in their package.json:

    "react": "19.0.0-rc.1",
    "react-dom": "19.0.0-rc.1",
    "@types/react": "npm:types-react@beta",
    "@types/react-dom": "npm:types-react-dom@beta",

you could also update r3f in the @react-three/postprocessing package.json to this:

"@react-three/fiber": "9.0.0-rc.1",

and then your fix could for example go into a @react-three/postprocessing 3.0.0-rc.0 (or skip the rc0 and start with rc.1 to align with react and r3f!?) and get tagged with rc (same as r3f did)

EDIT: @aryankarim what version of r3f did you use? Because I tried out your fix, but the types you import don't seem to match what gets exported from r3f v9.0.0-rc.1 (or rc.0), but other than that your fix seems to work :) (in my test I just undid the changes lines 12 and 25 that are related to types and kept the rest)

   "@react-three/postprocessing": "^2.16.3",
    "@react-three/fiber": "^9.0.0-alpha.8",
    "@types/three": "^0.169.0",
    "next": "15.0.2",
    "react": "19.0.0-rc-02c0e824-20241028",
    "react-dom": "19.0.0-rc-02c0e824-20241028",

I used r3f v9.0.0-alpha.8 for my testing environment (I don't remember how I got that version, tbh).

Well with r3f 9.0.0-rc.1, I get two other TS compilation errors on build:

src/Selection.tsx:9:47 - error TS2339: Property 'group' does not exist on type 'IntrinsicElements'.

9 export type SelectApi = JSX.IntrinsicElements['group'] & {
                                                ~~~~~~~

src/util.tsx:12:72 - error TS2694: Namespace '"react-postprocessing/node_modules/@react-three/fiber/dist/declarations/src/three-types"' has no exported member 'Node'.

12 export type EffectProps<T extends EffectConstructor> = ReactThreeFiber.Node<

Let me see if I'm gonna be able to fix it with rc.1 and without adding those types.

@aryankarim actually the JSX.IntrinsicElements['group'] type problem (I bumped into it last week when working on the animation for my blog), I added JSX to the React imports and this solved it, so something like this:

export type SelectApi = React.JSX.IntrinsicElements['group'] & {

or just add it to the import itself like this:

import React, { createContext, useState, useContext, useEffect, useRef, useMemo, type JSX } from 'react'

Yep, that solved the first one. I also noticed the new r3f uses ThreeElement interface to declare new nodes, so I think I solved the second problem too.

@chrisweb Could you try this new commit, see if it works with your environment?

Also, we can get @CodyJasonBennett or @abernier 's attention, to know if these changes are enough for making postprocessing work with latest r3f and react?!?

@aryankarim works great 👍 I had a small problem I will describe below, but other than that the build process had no errors and then I used it in the repo in which I found the problem and can confirm that it is solved

So I just had one problem in the utils.tsx file, my imports now look like this:

- import { Vector2 } from 'three'
- import React, { MutableRefObject } from 'react'
+ import React from 'react'
import * as THREE from 'three'
- import { type ReactThreeFiber, ThreeElement, extend, useThree } from '@react-three/fiber'
+ import { type ReactThreeFiber, type ThreeElement, extend, useThree } from '@react-three/fiber'
import type { Effect, BlendFunction } from 'postprocessing'

I had to add type in front of ThreeElement, without it I would get an ESLint error:
ThreeElement not found in '@react-three/fiber' eslint(import/named)

Oh yeah the other small difference is that I saw that everywhere in the code of the utils file the previous author(s) had used React.foo, Three.bar, ... which probably led to MutableRefObject and Vector2 to become unused, so I removed them too