Issues with react hooks about gltfjsx

[gsimone]

It happens don't worry!

[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

[email protected] /Users/west/Documents/CodeProjects/Websites/model-loader
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

React version check

[email protected] /Users/west/Documents/CodeProjects/Websites/model-loader
├─┬ @testing-library/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
└── [email protected]

[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.