Outdated drei dependency throws compilation errors: "Attempted import error: 'Geometry' is not exported from 'three' " & "ReferenceError: Blob is not defined"

[CtrlZ-Studio]

What example does this report relate to?

with-three-js

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

15.8.0

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

Vercel

Describe the Bug

If the three dependency is upgraded to version 0.125.0 and upwards, the following errors occur:

1. Compilation error: Attempted import error: 'Geometry' is not exported from 'three'.
2. ReferenceError: Blob is not defined.

Expected Behavior

The drei dependency should work with the latest version of the three dependecy.

To Reproduce

1, Upgrade three to version 0.125.0 or upwards.
2. Run "yarn dev"

The drei dependency does not support the latest version of the three dependency due to breaking changes introduced in version 0.125.0 (the removal of Geometry and Subdivision).

The drei dependency has been deprecated in favor of @react-three/drei.

The @react-three/drei dependency fixes this bug in version 3.0.0,

After deleting drei and installing the latest version of @react-three/drei, both errors are resolved and the example runs without issues.

drei also needs to be substituted by @react-three/drei in all imports and in the next-transpile-module plugin of the next.config.js file.

Please if possible either update the example with the changes suggested above or warn users in the read.me about the breaking changes that occur if the three dependency is upgraded without swapping drei with @react-three/drei.

[CtrlZ-Studio]

Issue has been fixed by laanayam333 in Update the react-three-js example. #22549

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.