BREAKING CHANGE: change accessing children from useInstanceHandle()'s… #302
Conversation
|
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: you could also update r3f in the @react-three/postprocessing package.json to this:
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 Well with r3f 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
or just add it to the import itself like this:
|
|
Yep, that solved the first one. I also noticed the new r3f uses @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: 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 |
|
@chrisweb Lol seems like the type issues are persistent. I believe we need to go over each file and make sure everything is safely typed and is up-to-date with R3F and React 19. I think that they would do the same thing if they ever come back maintaining this code. I'm afraid if I started making lots of changes, they wouldn't accept it or something. |
package.json
Outdated
| "@types/react": "^18.2.0", | ||
| "@types/react": "^18.3.12", | ||
| "@types/react-dom": "^18.2.1", |
There was a problem hiding this comment.
BTW this should be:
"@types/react": "npm:[email protected]",
"@types/react-dom": "npm:[email protected]",which may also need:
"overrides": {
"@types/react": "npm:[email protected]",
"@types/react-dom": "npm:[email protected]"
}This is detailed in https://react.dev/blog/2024/04/25/react-19-upgrade-guide, and we have our own https://github.com/pmndrs/react-three-fiber/blob/v9/docs/tutorials/v9-migration-guide.mdx.
|
Thanks for this. I've been busy with React 19 changes and conferences, but this is something we are interested in getting across the line as we're closer to release. Drei has been at the forefront of our concern, but my hope is this library will only need type changes, which can be checked off with the compiler/IDE. I'm about to get on another plane, but happy to test and answer any questions in the coming days. |
|
Great. Yes, I think Drei has more priority to function properly. Good luck with your trips and conferences. Indeed, except on the With my latest commit, I have tested a bunch of effects on a Nextjs 15 environment. I haven't tested |
|
Thanks for this contribution @aryankarim this has for now unblocked me trying to upgrade a project using r3f to next.js 15 / react 19 |
|
Thank you @aryankarim, you're a savior !! |
|
@stijlfigurant @teneburu how are you guys getting this to work? I've tried Locally it works fine. On Github actions when trying to install dependencies via pnpm it runs some yarn install, but fails on |
|
The above error seems to be caused by different versions of |
|
See my review comment for Yarn usage. I noticed we needed overrides during testing in R3F. |
|
I have overrides at every level: my fork on this repo & the root level of my monorepo. doesn't exist so I'm using This doesn't make a difference. |
|
any news? |
I've manually copied and pasted the dist built by this branch into my NextJs v.15 which uses React v.19. Everything works.
However, I'm not sure about the semantic versioning.
Developers should install as
npm install @react-three/[email protected]IMO.This is my first every PR. Please let me know if I've missed anything.
Closes #301