title: React Three Fiber OBJLoader conflicts witth @types/three
body: <p>I am following the official React Three Fiber Docs here. I am trying to load .obj files into my scene, using this article: <a href="https://docs.pmnd.rs/react-three-fiber/tutorials/loading-models#loading-obj-models" rel="nofollow noreferrer">react-three-fiber docs: loading obj models</a>
  The trouble starts here:</p>
  <blockquote>
  <p><strong>Part 1: import of OBJLoader</strong></p>
  </blockquote>
  <p><strong>Best case, I think this issue can be solved here.</strong></p>
  <p>I'd be more than happy to find and solve the error here because it only gets uglier later on. Anyways, I can't seem to get the following line to work. Mind you, this is literally copy-pasted from the official docs:</p>
  <pre><code>import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
  </code></pre>
  <p>This line is marked red in VSC, and when I hover over it, I get these pieces of information:</p>
  <pre><code>'OBJLoader' is declared but its value is never read.ts(6133)
  Could not find a declaration file for module 'three/examples/jsm/loaders/OBJLoader'. 'F:/Documents/myproject/node_modules/three/examples/jsm/loaders/OBJLoader.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/three` if it exists or add a new declaration (.d.ts) file containing `declare module 'three/examples/jsm/loaders/OBJLoader';`
  </code></pre>
  <p>Trying to host the project with <code>npm run</code>, from this point on, breaks with the following errors:</p>
  <pre><code>Failed to compile.
  F:/Documents/myproject/src/components/editor/Editor.tsx
  Type error: Could not find a declaration file for module 'three/examples/jsm/loaders/OBJLoader'. 'F:/Documents/myproject/node_modules/three/examples/jsm/loaders/OBJLoader.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/three` if it exists or add a new declaration (.d.ts) file containing `declare module 'three/examples/jsm/loaders/OBJLoader';`  TS7016
  </code></pre>
  <blockquote>
  <p><strong>Part 2: Installing @types/three</strong></p>
  </blockquote>
  <p>The error messages told me to <code>npm i --save-dev @types/three</code>, so I did. This resolves the import error, <strong>but</strong> it opens up a whole 'nother can of worms:</p>
  <p>I have a BoxComponent that I am adding to my scene (I am only just starting out with react three fiber and I wanted to start with simple boxes before working my way to custom imported .obj files). It's based on <a href="https://docs.pmnd.rs/react-three-fiber/getting-started/introduction" rel="nofollow noreferrer">another page from the official React Three Fiber Docs</a>, rudimentally tweaked to fit my project's needs. Here's its basic conent:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useRef, useState } from "react";
  import { BoxGeometryProps, useFrame } from "@react-three/fiber";
  
  export interface BoxProps {
    position: Array&lt;number&gt;;
    optinalParam?: string;
  }
  
  const Box = (props: BoxProps) =&gt; {
    const ref = useRef(Object);
    const [hovered, hover] = useState(false);
    const [clicked, click] = useState(false);
  
    useFrame((state, delta) =&gt; {
      let refCurrent: BoxGeometryProps | undefined = ref.current; // [ERROR #1]
      if (refCurrent !== undefined) {
        refCurrent.rotation.z += 0.005; // [ERROR #2]
        refCurrent.rotation.x -= 0.005; // [ERROR #2]
      }
    });
  
    return (
      &lt;mesh
        position={props.position} // [ERROR #3]
        ref={ref}
        scale={clicked ? 2.0 : 1}
        onClick={(event) =&gt; click(!clicked)}
        onPointerOver={(event) =&gt; hover(true)}
        onPointerOut={(event) =&gt; hover(false)}
      &gt;
        &lt;boxGeometry args={[1, 1, 1]} /&gt;
        &lt;meshStandardMaterial color={hovered ? "lightgreen" : "lime"} /&gt;
      &lt;/mesh&gt;
    );
  };
  
  export default function MyBox(props: BoxProps) {
    return (
      &lt;&gt;
        &lt;Box position={props.position} /&gt;
      &lt;/&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>[ERROR #1]:</p>
  <pre><code>Value of type 'ObjectConstructor' has no properties in common with type 'ExtendedColors&lt;Overwrite&lt;Partial&lt;BoxGeometry&gt;, NodeProps&lt;BoxGeometry, typeof BoxGeometry&gt;&gt;&gt;'. Did you mean to call it?ts(2560)
  BoxComponent.tsx(21, 56): Did you mean to use 'new' with this expression?
  </code></pre>
  <p>[ERROR #2]:</p>
  <pre><code>Property 'rotation' does not exist on type 'ExtendedColors&lt;Overwrite&lt;Partial&lt;BoxGeometry&gt;, NodeProps&lt;BoxGeometry, typeof BoxGeometry&gt;&gt;&gt;'.ts(2339)
  </code></pre>
  <p>[ERROR #3]:</p>
  <pre><code>Type 'number[]' is not assignable to type 'Vector3 | undefined'.
  Type 'number[]' is not assignable to type '[x: number, y: number, z: number]'.
  Target requires 3 element(s) but source may have fewer.ts(2322)
  three-types.d.ts(35, 5): The expected type comes from property 'position' which is declared here on type 'MeshProps'
  </code></pre>
  <p>Looking at it just now, I have a feeling that the solution could be found with this last line <code>three-types.d.ts(35, 5): The expected type...</code> But, in all honesty, I don't know how @types packages work at all and, as mentioned before, I think this could be resolved in Part 1 and I would be mega happy about that.</p>
  <p>I don't post often but I am very frustrated here. I am following the official docs, with a few minor expansions and tweaks, and yet my project is suddenly completely busted, when I install one more little package via npm.
  Very much looking forward for help, and a big, big thank you in advance.</p>
  <p>P.S., here's my <code>package.json</code>:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>{
    "name": "myproject",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@emotion/react": "^11.8.2",
      "@emotion/styled": "^11.8.1",
      "@material-ui/core": "^4.12.3",
      "@mui/icons-material": "^5.5.1",
      "@mui/material": "^5.5.1",
      "@react-three/drei": "^8.16.4",
      "@react-three/fiber": "^7.0.26",
      "@testing-library/jest-dom": "^5.16.2",
      "@testing-library/react": "^12.1.2",
      "@testing-library/user-event": "^13.5.0",
      "@types/jest": "^27.4.0",
      "@types/node": "^17.0.17",
      "@types/react": "^17.0.44",
      "@types/react-dom": "^17.0.11",
      "react": "^17.0.2",
      "react-dom": "^17.0.2",
      "react-router-dom": "^6.2.1",
      "react-scripts": "^2.1.3",
      "three": "^0.137.5",
      "typescript": "^4.5.5",
      "uuid": "^8.3.2",
      "web-vitals": "^2.1.4",
      "zustand": "^3.7.2"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": [
        "react-app",
        "react-app/jest"
      ]
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    },
    "devDependencies": {
      "@types/three": "^0.140.0",
      "@types/uuid": "^8.3.4"
    }
  }</code></pre>
  </div>
  </div>
  </p>