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
When trying to use ecctrl within a next.js project I get a bunch of errors from within node_modules. They look like this:
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:
specifically this line:
should be
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