How to use Drei's <View>?

Question

I want to split my canvas by using <View>, but there is something wrong. The error is 'Hooks can only be used within the Canvas component!'.

Does someone know how to fix it? Console Warning

My code is here.

//index.jsx

import './style.css'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Canvas } from '@react-three/fiber'
import Experience from './Experience.jsx'
import * as THREE from 'three'



const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(
    <>
    <View>
        <Experience/>
    </View>
    <Canvas
        camera={ {
            fov: 45,
            near: 0.1,
            far: 200,
            position: [ - 4, 3, 30 ]
        } }
    >
        
        <View.Port/>
    </Canvas>
    </>
)

Answer 1

It seems like you're trying to use React Three Fiber's component to split your canvas, but encountering an error related to React Hooks. However, in your provided code, you're not using any hooks outside the Canvas component.

The error message 'Hooks can only be used within the Canvas component!' suggests that you might be importing hooks from React Three Fiber (@react-three/fiber) and attempting to use them outside of a component rendered within the component.

Answer 2

it looks like you are not importing view from drei ;

import it using this line of code

import { View } from "@react-three/drei";