React 19 support

[chrisweb]

I created a reproduction repository for an error in the react postprocessing effectcomposer when using the latest r3f v9 beta 1 package (as well as next.js 15 / react 19)

The error message that gets catched by Next.js is the following:

TypeError: Cannot read properties of undefined (reading 'length')

which corresponds to line 139 https://github.com/pmndrs/react-postprocessing/blob/master/src/EffectComposer.tsx#L139 in the typescript source file

I wasn't sure if this repository is the right place to open an issue, as r3f v9 transitioned to a reconciler (previously core renderer) due to heavy changes in react 19, I assume the problem in the effectcomposer might be related to those changes

[ChronoByteCosmonaut]

Same issue 👍

[VrTech]

We might need to consider updating Effectcomposer to match react 19 as well 👍

[n1xx1]

@CodyJasonBennett can you do an experimental release? It seems like the action didn't work

[mikeknapp]

I'm still seeing the same issue (TypeError: Cannot read properties of undefined (reading 'length')), even with the new 2.19.0 version from yesterday:

"@react-three/fiber": "^9.0.0-rc.4"
"@react-three/drei": "https://pkg.csb.dev/pmndrs/drei/commit/d2d25601/@react-three/drei",
"@react-three/postprocessing": "^2.19.0"
"three": "^0.172.0"

Code:

<Selection>
  <EffectComposer multisampling={8} autoClear={false}>
    <Outline blur edgeStrength={100} width={1000} />
  </EffectComposer>
  <Select enabled>
    <mesh position={[0, 0, 0]}>
      <boxGeometry />
      <meshStandardMaterial color="orange" />
    </mesh>
  </Select>
</Selection>

[mikeknapp]

Ah, ok, I worked out I need to build the latest rc -- but that's still not working for me:

Install the rc branch instead of 2.19.0:

npm rm @react-three\postprocessing
npm i pmndrs/react-postprocessing#rc

Then build the dist directory:

git clone https://github.com/pmndrs/react-postprocessing.git
cd react-postprocessing
git switch rc
npm i --force
npm run build

Copy the resulting dist directory into your node_modules\@react-three\postprocessing dir.

Now I can import the latest and greatest, but I get a different error running the code in #301 (comment):

Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

I've spent 1/2 day on trying to get this to work, but not looking good. I'll probably work out how to revert my project to React 18 in the meantime.

If anyone could put together a guide on how to navigate, I would say there are lots of new users running into issues at the moment. 🙏 Thank you for a great package!

[CodyJasonBennett]

You should stay on React 18 if this is a production project. NPM is correct in barring you from install here since this library is not forwards compatible. React 19 is not supported by much of NPM or our ecosystem yet, despite direct collaboration with Meta and Vercel. It will take some time before we can get release candidates up here due to a mishap on NPM's side and to test/iterate until release.

[mikeknapp]

You should stay on React 18 if this is a production project. NPM is correct in barring you from install here since this library is not forwards compatible. React 19 is not supported by much of NPM or our ecosystem yet, despite direct collaboration with Meta and Vercel. It will take some time before we can get release candidates up here due to a mishap on NPM's side and to test/iterate until release.

Yep, fair enough. The issue perhaps lies with Next.js.

My normal workflow for starting a new project is to go to the Next.js website and copy the install command, since I can never remember it. I did that a few days for this new project, and here we are. I've spent about 1.5 days trying to select a mesh in my scene, and tearing my hair out. I suspect there will be a lot of new users in the same boat.

Will downgrade to React 18 now.

[CodyJasonBennett]

Next 15 ships with an experimental build of React 19, before that was released by Meta on NPM or types to DefinitelyTyped. You would need to downgrade to Next 14 to use React 18 (also experimental). This is an unfortunate situation since it makes using ecosystem renderers with Next not entirely possible (e.g., using Next router hooks will crash in R3F). Fortunately, we're not far from release, as we're only waiting for things to clear up on NPM for Drei and many libraries to hit RC and then stable.

[CodyJasonBennett]

For those adventurous, we're now putting out release candidates for react-postprocessing v3.

See https://github.com/pmndrs/react-postprocessing/releases/tag/v3.0.0-rc.0 for a tentative list of changes, which includes React 19 support.

[dreamoftrees]

Thanks @CodyJasonBennett that's awesome!

[chrisweb]

@CodyJasonBennett should I open a seperate ticket?

I'm getting a "Failed to compile." when building:

./node_modules/@react-three/postprocessing/src/effects/Autofocus.tsx:17:30
Type error: An import path can only end with a '.tsx' extension when 'allowImportingTsExtensions' is enabled.
  15 | import { easing } from 'maath'
  16 |
> 17 | import { DepthOfField } from './DepthOfField.tsx'
     |                              ^
  18 | import { EffectComposerContext } from '../EffectComposer.tsx'
  19 |
  20 | export type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {
Static worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1

stack used: Next.js 15 canary, React 19 canary, r3f 9.0.0-rc.5, @react-three/postprocessing 3.0.0-rc.1

EDIT: as a workaround I added allowImportingTsExtensions to my tsconfig, which fixed the build process for me

tsconfig.json

{
    "compilerOptions": {
        "allowImportingTsExtensions": true
    }
}

EDIT 2: thank you for the quick update @CodyJasonBennett , the 3.0.0-rc.2 fixes the above problem :)

[CodyJasonBennett]

I put out a quick fix in v3.0.0-rc.2.

[donaldpipowitch]

I'm getting a "Failed to compile." when building:

Me, too, but because of my "noUnusedLocals": true, setting. I guess this happens, because the lib doesn't ship with a .d.ts, but the raw .ts files are opened...? Because I have "skipLibCheck": true configured and was surprised to see a compilation error.