pmndrs / pmndrs/ecctrl

Typescript Errors from /node_modules/ecctrl/src/EcctrlJoystick.tsx

Open
#130 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
797
Forks
98
Avg merge
8m
Merged PRs (30d)
1

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Inspect ecctrl/dist/Ecctrl.d.ts and src/EcctrlJoystick.tsx, then trace how the package declarations are generated. Reproduce the TypeScript failure with the reported Next.js, ecctrl, React Three Fiber, Rapier, and three versions; done means the published declaration resolves the built module without type-checking the source TSX file.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react, three.js, typescript
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.