When trying to use ecctrl within a next.js project I get a bunch of errors from within node_modules. They look like this:

Type error: Type 'CylinderGeometry' is missing the following properties from type 'BufferGeometry': drawcalls, offsets, addIndex, addDrawCall, and 5 more.

  129 |         <Suspense fallback="null">
  130 |             <animated.group position-x={springs.basePositionX} position-y={springs.basePositionY}>
> 131 |                 <mesh geometry={joystickBaseGeo} material={joystickBaseMaterial} rotation={[-Math.PI / 2, 0, 0]} {...props.joystickBaseProps} />
      |                       ^
  132 |             </animated.group>
  133 |             <animated.group rotation-x={springs.topRotationX} rotation-y={springs.topRotationY}>
  134 |                 <mesh geometry={joystickStickGeo} material={joystickStickMaterial} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 1.5]} {...props.joystickStickProps} />

Now the thing that makes me curious is that these happen even though I have skipLibCheck set to true within my tsconfig... Still I get errors from node_modules? My tsconfig for reference:

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es2017",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "forceConsistentCasingInFileNames": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "noEmit": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "incremental": true,
    "baseUrl": ".",
  },
  "exclude": ["node_modules"],
  "include": [
    "next-env.d.ts",
    "**/*.d.ts",
    "**/*.ts",
    "**/*.tsx",
  ]
}

However, after some digging, I saw that the file those errors are from is not a .d.ts file => it's a .tsx file... and hence not covered by skipLibCheck.

Looking at the ecctrl/dist/Ecctrl.d.ts I think I might have found the culprit for this:

import { RapierRigidBody, type RigidBodyProps } from "@react-three/rapier";
import { type ReactNode } from "react";
import React from "react";
export { EcctrlAnimation } from "./EcctrlAnimation";
export { useFollowCam } from "./hooks/useFollowCam";
export { useGame } from "./stores/useGame";
export { EcctrlJoystick } from "../src/EcctrlJoystick";
export { useJoystickControls } from "./stores/useJoystickControls";
declare const _default: React.ForwardRefExoticComponent<EcctrlProps & React.RefAttributes<CustomEcctrlRigidBody>>;
export default _default;
export type camListenerTargetType = "document" | "domElement";

specifically this line:

export { EcctrlJoystick } from "../src/EcctrlJoystick";

should be

export { EcctrlJoystick } from "./EcctrlJoystick";

not sure where/how these are generated, but it importing from ../src makes type definitions break because it doesn't use the type definitions and instead the "real" .tsx file. Which leads to the inclusion of it into typechecking + the resulting errors. (most likely because of some version/type mismatch between ecctrl three types vs. locally installed three.js version?)

my package.json versions:

{
  "ecctrl": "^1.0.92",
  "@react-three/rapier": "^1.5.0",
  "@react-three/fiber": "^8.17.14",
  "three": "^0.173.0",
}

Related to:
#12
#96
#82
#25