I'm making a library. How can I use R3F hooks in components? #2825
-
|
TLDR: I'm making an R3F component library and I'm getting the error I'm trying to make a simple library that exports a single R3F component. I've just slightly modified the import { useRef, useState } from 'react'
import { useFrame, MeshProps } from '@react-three/fiber'
import * as THREE from 'three'
type GreenBoxProps = MeshProps
function GreenBox(props: GreenBoxProps) {
// This reference will give us direct access to the mesh
const mesh = useRef<THREE.Mesh>(null)
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
// Subscribe this component to the render-loop, rotate the mesh every frame
useFrame((state, delta) => {
if (!mesh.current) return
mesh.current.rotation.x += delta
})
// Return view, these are regular three.js elements expressed in JSX
return (
<mesh
ref={mesh}
scale={active ? 1.5 : 1}
onClick={(event) => setActive(!active)}
onPointerOver={(event) => setHover(true)}
onPointerOut={(event) => setHover(false)}
{...props}
>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'green' : 'green'} />
</mesh>
)
}
export default GreenBoxHere is the page I'm trying to use the component on in my Next.js app. Note that the import type { NextPage } from 'next'
import { Canvas } from '@react-three/fiber'
import styles from './index.module.scss'
import GreenBox from 'rollup-starter-lib'
const Home: NextPage = () => {
return (
<div className={styles.base}>
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<GreenBox position={[-1.2, 0, 0]} />
<GreenBox position={[1.2, 0, 0]} />
</Canvas>
</div>
)
}
export default HomeWhen I run the application, I get this error: I'm a little confused why I'm getting this error, since the I've been looking at some of the import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript'
import terser from '@rollup/plugin-terser'
export default {
input: 'src/main.tsx',
output: [
{
file: 'dist/bundle.js',
format: 'cjs',
sourcemap: true,
},
{
file: 'dist/bundle.esm.js',
format: 'esm',
sourcemap: true,
},
],
plugins: [
// The commonjs plugin converts CommonJS modules to ES modules
// so they are compatible with Rollup.
// https://github.com/rollup/plugins/tree/master/packages/commonjs
commonjs(),
// The typescript plugin converts TypeScript to JavaScript.
// https://github.com/rollup/plugins/tree/master/packages/typescript/#readme
typescript(),
// The node-resolve plugin tells Rollup how to find external modules.
// https://github.com/rollup/plugins/tree/master/packages/node-resolve
resolve(),
// The terser plugin minifies the output.
terser(),
],
external: ['react', 'react-dom', 'three', '@react-three/fiber'],
} |
Beta Was this translation helpful? Give feedback.
Answered by
ChrisCrossCrash
Apr 7, 2023
Replies: 2 comments
-
|
I was finally able to fix this by switching from Node 16 to Node 18, then deleting my |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
ChrisCrossCrash
-
|
Im getting a very similar error, i dont know why but after i add Works fine <Canvas camera={{ position: [10, 10, 10], fov: 25 }}>
<group position={[0, -0.5, 0]}>
<Center top position={[0, 0, 0]}>
<RoundedBox radius={0.02} args={[0.25, 0.37, 0.56]}>
<meshStandardMaterial color="#f3f3f3" />
</RoundedBox>
</Center>
<Shadows />
<Grid
position={[0, -0.01, 0]}
cellSize={0.5}
cellThickness={1}
cellColor={"#6f6f6f"}
sectionSize={3.3}
sectionThickness={1.5}
sectionColor={baseColor}
fadeDistance={25}
fadeStrength={1}
followCamera={false}
infiniteGrid={true}
/>
</group>
<OrbitControls makeDefault />
</Canvas>Cant resize window <Canvas camera={{ position: [10, 10, 10], fov: 25 }}>
<Environment preset="city" blur={0.5} />
<group position={[0, -0.5, 0]}>
<Center top position={[0, 0, 0]}>
<RoundedBox radius={0.02} args={[0.25, 0.37, 0.56]}>
<meshStandardMaterial color="#f3f3f3" />
</RoundedBox>
</Center>
<Shadows />
<Grid
position={[0, -0.01, 0]}
cellSize={0.5}
cellThickness={1}
cellColor={"#6f6f6f"}
sectionSize={3.3}
sectionThickness={1.5}
sectionColor={baseColor}
fadeDistance={25}
fadeStrength={1}
followCamera={false}
infiniteGrid={true}
/>
</group>
<OrbitControls makeDefault />
</Canvas>This throw the same error: |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I was finally able to fix this by switching from Node 16 to Node 18, then deleting my
node_modulesfolder and reinstalling.