React Three Fiber OBJLoader conflicts witth @types/three

Question

I am following the official React Three Fiber Docs here. I am trying to load .obj files into my scene, using this article: react-three-fiber docs: loading obj models The trouble starts here:

Part 1: import of OBJLoader

Best case, I think this issue can be solved here.

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:

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'

This line is marked red in VSC, and when I hover over it, I get these pieces of information:

'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';`

Trying to host the project with npm run, from this point on, breaks with the following errors:

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

Part 2: Installing @types/three

The error messages told me to npm i --save-dev @types/three, so I did. This resolves the import error, but it opens up a whole 'nother can of worms:

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 another page from the official React Three Fiber Docs, rudimentally tweaked to fit my project's needs. Here's its basic conent:

import React, { useRef, useState } from "react";
import { BoxGeometryProps, useFrame } from "@react-three/fiber";

export interface BoxProps {
  position: Array<number>;
  optinalParam?: string;
}

const Box = (props: BoxProps) => {
  const ref = useRef(Object);
  const [hovered, hover] = useState(false);
  const [clicked, click] = useState(false);

  useFrame((state, delta) => {
    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 (
    <mesh
      position={props.position} // [ERROR #3]
      ref={ref}
      scale={clicked ? 2.0 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? "lightgreen" : "lime"} />
    </mesh>
  );
};

export default function MyBox(props: BoxProps) {
  return (
    <>
      <Box position={props.position} />
    </>
  );
}

[ERROR #1]:

Value of type 'ObjectConstructor' has no properties in common with type 'ExtendedColors<Overwrite<Partial<BoxGeometry>, NodeProps<BoxGeometry, typeof BoxGeometry>>>'. Did you mean to call it?ts(2560)
BoxComponent.tsx(21, 56): Did you mean to use 'new' with this expression?

[ERROR #2]:

Property 'rotation' does not exist on type 'ExtendedColors<Overwrite<Partial<BoxGeometry>, NodeProps<BoxGeometry, typeof BoxGeometry>>>'.ts(2339)

[ERROR #3]:

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'

Looking at it just now, I have a feeling that the solution could be found with this last line three-types.d.ts(35, 5): The expected type... 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.

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.S., here's my package.json:

{
  "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": [
      ">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"
  }
}

Answer 1

UPDATE:

I managed to get rid of all the errors. Can't say I fully understand it but it's definitely related to useRef() and its secret magic. Providing it with a "strong enough" type in my BoxComponent resolved the issues: like such:

BEFORE:

const meshRef = useRef<BoxGeometryProps>(null);

AFTER:

const mesh = useRef<Mesh>(null);

With Mesh imported straight from three. I can't shake the feeling that this is gonna give me trouble again soon, since I feel like I should be use as much stuff as possibly from react-three-fiber, rather than three. But, for now, this question can be marked as solved.