Issues with react hooks

[sean-hale-dev]

Howdy all, I'm pretty new to both three.js and React itself but I've been running into an issue with this package that I think it an issue on the programs side so hear me out.

I've been trying to render .gltf/.glb files via Gltfjsx and react-three-fiber and figured I'd start off with a tutorial (https://www.youtube.com/watch?v=q7yH_ajINpA) that I'd try following verbatim. Initially I was running into an import error with drei but I resolved that thanks to #67 but I'm not out of the water. Now when calling the generated component I'm getting "Error: Invalid hook call. Hooks can only be called inside of the body of a function component." on render. The crash handler doesn't seem to be a fan of the line "const { nodes, materials } = useGLTF("/kick.glb");"

Does anyone have advice on this?

[gsimone]

Can you share the code? It might be a couple of reasons. Follow the link that comes with the error to read more

https://reactjs.org/warnings/invalid-hook-call-warning.html

[sean-hale-dev]

Here's the code, I'd read the page the error page linked but no dice as far as I can tell.

App.js

import React, { Suspense } from "react";
import { Canvas } from "react-three-fiber";
import { OrbitControls } from "@react-three/drei"
import './App.css';
import Kick from "./Kick"

function App() {
        return (
                <Canvas>
                  <OrbitControls />
                  <ambientLight intensity={0.6} />
                  <directionalLight intensity={0.5} />
                  <Suspense fallback={null}>
                        <Kick />
                  </Suspense>
                </Canvas>
        )
}

export default App;

Kick.js

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from "react";
import { useGLTF } from "@react-three/drei/core/useGLTF";

export default function Model(props) {
  const group = useRef();
  const { nodes, materials } = useGLTF("/kick.glb");
  return (
    <group ref={group} {...props} dispose={null}>
      <group rotation={[Math.PI / 2, 0, 0]} scale={[0.01, 0.01, 0.01]}>
        <primitive object={nodes.mixamorigHips} />
        <skinnedMesh
          material={materials.Ch03_Body}
          geometry={nodes.Ch03.geometry}
          skeleton={nodes.Ch03.skeleton}
        />
      </group>
    </group>
  );
}

useGLTF.preload("/kick.glb");

NPM Installed packages

model-loader@0.1.0 /Users/west/Documents/CodeProjects/Websites/model-loader
├── @testing-library/jest-dom@5.11.9
├── @testing-library/react@11.2.5
├── @testing-library/user-event@12.7.1
├── react-dom@17.0.1
├── react-scripts@4.0.2
├── react-three-fiber@5.3.18
├── react@17.0.1
├── three@0.125.2
└── web-vitals@1.1.0

React version check

model-loader@0.1.0 /Users/west/Documents/CodeProjects/Websites/model-loader
├─┬ @testing-library/react@11.2.5
│ └── react@17.0.1 deduped
├─┬ react-dom@17.0.1
│ └── react@17.0.1 deduped
├─┬ react-scripts@4.0.2
│ └── react@17.0.1 deduped
├─┬ react-three-fiber@5.3.18
│ ├─┬ react-reconciler@0.26.1
│ │ └── react@17.0.1 deduped
│ ├─┬ react-use-measure@2.0.3
│ │ └── react@17.0.1 deduped
│ ├── react@17.0.1 deduped
│ └─┬ use-asset@1.0.2
│   └── react@17.0.1 deduped
└── react@17.0.1

[gsimone]

Can you try installing @react-three/drei ?

[sean-hale-dev]

I cannot believe I just forgot a package. Sorry to waste time, looks like this all works now.

[gsimone]

It happens don't worry!