https://github.com/verekia/r3f-rsc
https://github.com/verekia/r3f-rsc
Last synced: about 20 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/verekia/r3f-rsc
- Owner: verekia
- Created: 2024-03-08T11:54:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-08T15:57:08.000Z (over 1 year ago)
- Last Synced: 2025-02-06T10:32:23.918Z (8 months ago)
- Language: TypeScript
- Homepage: https://r3f-rsc.pages.dev/r3f/
- Size: 26.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Three Fiber + RSC
What works, what doesn't. There is also an `spa` branch with an example on a single page with animated cubes.
## ❌ Having the Canvas in a server-side component:
```jsx
import { Canvas } from '@react-three/fiber'
export default ({ children }) => (
{children}
)
```
Stack trace:
```
Server Error
Error: Class extends value undefined is not a constructor or null
This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
(rsc)/node_modules/@react-three/fiber/dist/index-e6b5343a.esm.js (396:28)
(rsc)/./node_modules/@react-three/fiber/dist/index-e6b5343a.esm.js
file:///Users/verekia/Local/Code/r3f-rsc/.next/server/vendor-chunks/@react-three.js (20:1)
__webpack_require__
file:///Users/verekia/Local/Code/r3f-rsc/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./node_modules/@react-three/fiber/dist/react-three-fiber.esm.js (33:80)
```
## (✅ prod, ❌ dev) Using Next useRouter inside the canvas
It works on prod but not in dev, wth?
Because context is not shared from the outside of the Canvas to the inside?
```jsx
'use client'
import { useRouter } from 'next/navigation'
export default () => {
const { push } = useRouter()
return (
<>
push('/red')}>
// ...
```
Stack trace:
```
Unhandled Runtime Error
TypeError: dispatcher.use is not a function
Call Stack
use
(app-pages-browser)/node_modules/next/dist/compiled/react/cjs/react.development.js (1812:0)
Next.js
renderWithHooks
(app-pages-browser)/node_modules/react-reconciler/cjs/react-reconciler.development.js (7363:0)
mountIndeterminateComponent
(app-pages-browser)/node_modules/react-reconciler/cjs/react-reconciler.development.js (12327:0)
beginWork
(app-pages-browser)/node_modules/react-reconciler/cjs/react-reconciler.development.js (13831:0)
beginWork$1
(app-pages-browser)/node_modules/react-reconciler/cjs/react-reconciler.development.js (19513:0)
```
## ❌ Event handlers on server components
That's expected. It would be the same with a div.
```jsx
export default () => (
console.log('hello')}
>
```
Stack trace:
```
Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
Call Stack
/Users/verekia/Local/Code/r3f-rsc/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:280828)
Object.toJSON
/Users/verekia/Local/Code/r3f-rsc/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:281723)
stringify
/Users/verekia/Local/Code/r3f-rsc/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:268079)
```