search

pmndrs / ecctrl

🕹️ A floating rigibody character controller
MIT License
467 stars 50 forks source link

usage with typescript #12

Closed jeremiasjutz closed 6 months ago

jeremiasjutz commented 8 months ago

I have a very simple grid based game that uses ecctrl. Sadly my (vite) builds don't work as tsc always errors on ecctrl (even with skipLibCheck: true).

This is my code:

import { RigidBody } from "@react-three/rapier";
import Ecctrl from "ecctrl";
import Bear from "./components/Bear";
import { mainMap } from "./lib/maps";
import { models } from "./lib/models";

export default function Experience() {
  return (
    <>
      <ambientLight intensity={2} />
      <directionalLight position={[-10, 10, 0]} intensity={1} />
      <directionalLight position={[10, 10, 0]} intensity={1} />

      {/* @ts-expect-error Ecctrl */}
      <Ecctrl floatHeight={0}>
        <Bear position-y={-0.5} scale={[0.7, 0.7, 0.7]} />
      </Ecctrl>

      <RigidBody type="fixed" colliders="trimesh" scale={[8, 8, 8]}>
        {mainMap.map((rows, rowIndex) =>
          rows.map((model, colIndex) => {
            return models[model]({ position: [colIndex, 0, rowIndex] });
          }),
        )}
      </RigidBody>
    </>
  );
}

Am I doing something wrong?

Here is the error log when trying to build:

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:82:9 - error TS6133: 'jumpLandAnimation' is declared but its value is never read.

82   const jumpLandAnimation = !animated
           ~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:357:7 - error TS2322: Type 'null' is not assignable to type 'DirectionalLight'.

357   let dirLight: THREE.DirectionalLight = null;
          ~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:371:18 - error TS6133: 'followCam' is declared but its value is never read.

371   const { pivot, followCam, cameraCollisionDetect } =
                     ~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:396:7 - error TS2322: Type 'null' is not assignable to type 'RayColliderToi'.

396   let rayHit: RayColliderToi = null;
          ~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:404:7 - error TS2322: Type 'null' is not assignable to type 'number'.

404   let slopeAngle: number = null;
          ~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:405:7 - error TS2322: Type 'null' is not assignable to type 'Vector'.

405   let actualSlopeNormal: Vector = null;
          ~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:406:7 - error TS2322: Type 'null' is not assignable to type 'number'.

406   let actualSlopeAngle: number = null;
          ~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:412:7 - error TS2322: Type 'null' is not assignable to type 'RayColliderToi'.

412   let slopeRayHit: RayColliderToi = null;
          ~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:444:37 - error TS18048: 'characterModelRef.current' is possibly 'undefined'.

444     movingDirection.applyQuaternion(characterModelRef.current.quaternion);
                                        ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:492:7 - error TS18048: 'characterRef.current' is possibly 'undefined'.

492       characterRef.current.mass()
          ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:499:16 - error TS18048: 'characterModelRef.current' is possibly 'undefined'.

499       Math.sin(characterModelRef.current.rotation.y).toFixed(3) ==
                   ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:537:5 - error TS18048: 'characterRef.current' is possibly 'undefined'.

537     characterRef.current.applyImpulseAtPoint(
        ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:553:29 - error TS18048: 'characterRef.current' is possibly 'undefined'.

553       -autoBalanceSpringK * characterRef.current.rotation().x -
                                ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:554:7 - error TS18048: 'characterRef.current' is possibly 'undefined'.

554       characterRef.current.angvel().x * autoBalanceDampingC,
          ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:555:29 - error TS18048: 'characterRef.current' is possibly 'undefined'.

555       -autoBalanceSpringK * characterRef.current.rotation().y -
                                ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:556:7 - error TS18048: 'characterRef.current' is possibly 'undefined'.

556       characterRef.current.angvel().y * autoBalanceDampingOnY,
          ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:557:29 - error TS18048: 'characterRef.current' is possibly 'undefined'.

557       -autoBalanceSpringK * characterRef.current.rotation().z -
                                ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:558:7 - error TS18048: 'characterRef.current' is possibly 'undefined'.

558       characterRef.current.angvel().z * autoBalanceDampingC
          ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:560:5 - error TS18048: 'characterRef.current' is possibly 'undefined'.

560     characterRef.current.applyTorqueImpulse(dragAngForce, false);
        ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:566:18 - error TS18048: 'characterModelRef.current' is possibly 'undefined'.

566       dirLight = characterModelRef.current.parent.parent.children.find(
                     ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:566:18 - error TS18047: 'characterModelRef.current.parent' is possibly 'null'.

566       dirLight = characterModelRef.current.parent.parent.children.find(
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:566:18 - error TS18047: 'characterModelRef.current.parent.parent' is possibly 'null'.

566       dirLight = characterModelRef.current.parent.parent.children.find(
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:578:23 - error TS2721: Cannot invoke an object which is possibly 'null'.

578           animated && action1Animation();
                          ~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:588:23 - error TS2721: Cannot invoke an object which is possibly 'null'.

588           animated && action2Animation();
                          ~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:598:23 - error TS2721: Cannot invoke an object which is possibly 'null'.

598           animated && action3Animation();
                          ~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:608:23 - error TS2721: Cannot invoke an object which is possibly 'null'.

608           animated && action4Animation();
                          ~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:623:5 - error TS18048: 'characterRef.current' is possibly 'undefined'.

623     characterRef.current.setEnabledRotations(
        ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:644:7 - error TS2322: Type 'Group<Object3DEventMap> | undefined' is not assignable to type 'Object3D<Object3DEventMap>'.
  Type 'undefined' is not assignable to type 'Object3D<Object3DEventMap>'.

644       dirLight.target = characterModelRef.current;
          ~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:698:7 - error TS18048: 'characterRef.current' is possibly 'undefined'.

698       characterRef.current.setLinvel(
          ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:714:5 - error TS18048: 'characterModelRef.current' is possibly 'undefined'.

714     characterModelRef.current.quaternion.rotateTowards(
        ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:734:5 - error TS2322: Type 'RayColliderToi | null' is not assignable to type 'RayColliderToi'.
  Type 'null' is not assignable to type 'RayColliderToi'.

734     rayHit = world.castRay(
        ~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:738:7 - error TS2345: Argument of type 'null' is not assignable to parameter of type 'QueryFilterFlags | undefined'.

738       null,
          ~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:776:38 - error TS2531: Object is possibly 'null'.

776         const rayHitObjectBodyType = rayHit.collider.parent().bodyType();
                                         ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:777:38 - error TS2531: Object is possibly 'null'.

777         const rayHitObjectBodyMass = rayHit.collider.parent().mass();
                                         ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:789:18 - error TS2531: Object is possibly 'null'.

789             .sub(rayHit.collider.parent().translation() as THREE.Vector3);
                     ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:791:38 - error TS2531: Object is possibly 'null'.

791           const movingObjectLinvel = rayHit.collider
                                         ~~~~~~~~~~~~~~~
792             .parent()
    ~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:795:38 - error TS2531: Object is possibly 'null'.

795           const movingObjectAngvel = rayHit.collider
                                         ~~~~~~~~~~~~~~~
796             .parent()
    ~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:825:13 - error TS2531: Object is possibly 'null'.

825             rayHit.collider
                ~~~~~~~~~~~~~~~
826               .parent()
    ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:843:5 - error TS18048: 'slopeRayOriginRef.current' is possibly 'undefined'.

843     slopeRayOriginRef.current.getWorldPosition(slopeRayorigin);
        ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:845:5 - error TS2322: Type 'RayColliderToi | null' is not assignable to type 'RayColliderToi'.
  Type 'null' is not assignable to type 'RayColliderToi'.

845     slopeRayHit = world.castRay(
        ~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:849:7 - error TS2345: Argument of type 'null' is not assignable to parameter of type 'QueryFilterFlags | undefined'.

849       null,
          ~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:857:7 - error TS2322: Type 'Vector | undefined' is not assignable to type 'Vector'.
  Type 'undefined' is not assignable to type 'Vector'.

857       actualSlopeNormal = slopeRayHit.collider.castRayAndGetNormal(
          ~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:880:9 - error TS2322: Type 'null' is not assignable to type 'number'.

880         slopeAngle = null;
            ~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:883:7 - error TS2322: Type 'null' is not assignable to type 'number'.

883       slopeAngle = null;
          ~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:893:11 - error TS18048: 'characterRef.current' is possibly 'undefined'.

893           characterRef.current.linvel().y * dampingC;
              ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:894:9 - error TS18048: 'characterRef.current' is possibly 'undefined'.

894         characterRef.current.applyImpulse(
            ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:918:9 - error TS18048: 'characterRef.current' is possibly 'undefined'.

918         characterRef.current.applyImpulse(dragForce, false);
            ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:927:9 - error TS18048: 'characterRef.current' is possibly 'undefined'.

927         characterRef.current.applyImpulse(dragForce, false);
            ~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:955:9 - error TS2721: Cannot invoke an object which is possibly 'null'.

955         idleAnimation();
            ~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:957:9 - error TS2721: Cannot invoke an object which is possibly 'null'.

957         jumpAnimation();
            ~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:959:15 - error TS2721: Cannot invoke an object which is possibly 'null'.

959         run ? runAnimation() : walkAnimation();
                  ~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:959:32 - error TS2721: Cannot invoke an object which is possibly 'null'.

959         run ? runAnimation() : walkAnimation();
                                   ~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:961:9 - error TS2721: Cannot invoke an object which is possibly 'null'.

961         jumpIdleAnimation();
            ~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:965:9 - error TS2721: Cannot invoke an object which is possibly 'null'.

965         fallAnimation();
            ~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:977:7 - error TS2322: Type 'MutableRefObject<RigidBody | undefined>' is not assignable to type 'Ref<RigidBody> | undefined'.
  Type 'MutableRefObject<RigidBody | undefined>' is not assignable to type 'RefObject<RigidBody>'.
    Types of property 'current' are incompatible.
      Type 'RigidBody | undefined' is not assignable to type 'RigidBody | null'.
        Type 'undefined' is not assignable to type 'RigidBody | null'.

977       ref={characterRef}
          ~~~

  node_modules/.pnpm/@types+react@18.2.23/node_modules/@types/react/index.d.ts:151:9
    151         ref?: Ref<T> | undefined;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & RigidBodyProps & RefAttributes<RigidBody>'

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:980:14 - error TS2322: Type 'MutableRefObject<Group<Object3DEventMap> | undefined>' is not assignable to type 'Ref<Group<Object3DEventMap>> | undefined'.
  Type 'MutableRefObject<Group<Object3DEventMap> | undefined>' is not assignable to type 'RefObject<Group<Object3DEventMap>>'.
    Types of property 'current' are incompatible.
      Type 'Group<Object3DEventMap> | undefined' is not assignable to type 'Group<Object3DEventMap> | null'.
        Type 'undefined' is not assignable to type 'Group<Object3DEventMap> | null'.

980       <group ref={characterModelRef} userData={{ camExcludeCollision: true }}>
                 ~~~

  node_modules/.pnpm/@react-three+fiber@8.14.3_react-dom@18.2.0_react@18.2.0_three@0.156.1/node_modules/@react-three/fiber/dist/declarations/src/three-types.d.ts:27:5
    27     ref?: React.Ref<T>;
           ~~~
    The expected type comes from property 'ref' which is declared here on type 'GroupProps'

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/Ecctrl.tsx:988:11 - error TS2322: Type 'MutableRefObject<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap> | undefined>' is not assignable to type 'Ref<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>> | undefined'.
  Type 'MutableRefObject<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap> | undefined>' is not assignable to type 'RefObject<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>>'.
    Types of property 'current' are incompatible.
      Type 'Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap> | undefined' is not assignable to type 'Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap> | null'.
        Type 'undefined' is not assignable to type 'Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap> | null'.

988           ref={slopeRayOriginRef}
              ~~~

  node_modules/.pnpm/@react-three+fiber@8.14.3_react-dom@18.2.0_react@18.2.0_three@0.156.1/node_modules/@react-three/fiber/dist/declarations/src/three-types.d.ts:27:5
    27     ref?: React.Ref<T>;
           ~~~
    The expected type comes from property 'ref' which is declared here on type 'MeshProps'

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/EcctrlAnimation.tsx:5:27 - error TS2307: Cannot find module 'three/examples/jsm/loaders/GLTFLoader' or its corresponding type declarations.

5 import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader";
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/EcctrlAnimation.tsx:41:7 - error TS18047: 'action' is possibly 'null'.

41       action
         ~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/EcctrlAnimation.tsx:44:34 - error TS2352: Conversion of type 'undefined' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

44         .setLoop(THREE.LoopOnce, undefined as number)
                                    ~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/EcctrlAnimation.tsx:46:7 - error TS18047: 'action' is possibly 'null'.

46       action.clampWhenFinished = true;
         ~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/EcctrlAnimation.tsx:48:7 - error TS18047: 'action' is possibly 'null'.

48       action.reset().fadeIn(0.2).play();
         ~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/EcctrlAnimation.tsx:56:7 - error TS18047: 'action' is possibly 'null'.

56       action.fadeOut(0.2);
         ~~~~~~

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/EcctrlAnimation.tsx:68:14 - error TS2322: Type 'MutableRefObject<undefined>' is not assignable to type 'Ref<Group<Object3DEventMap>> | undefined'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<Group<Object3DEventMap>>'.
    Types of property 'current' are incompatible.
      Type 'undefined' is not assignable to type 'Group<Object3DEventMap> | null'.

68       <group ref={group} dispose={null} userData={{ camExcludeCollision: true }}>
                ~~~

  node_modules/.pnpm/@react-three+fiber@8.14.3_react-dom@18.2.0_react@18.2.0_three@0.156.1/node_modules/@react-three/fiber/dist/declarations/src/three-types.d.ts:27:5
    27     ref?: React.Ref<T>;
           ~~~
    The expected type comes from property 'ref' which is declared here on type 'GroupProps'

node_modules/.pnpm/ecctrl@1.0.32_@react-three+fiber@8.14.3_@types+react-dom@18.2.8_@types+react@18.2.23_@types+t_4ggvehjjhyu3gmh3ukftw5ie7m/node_modules/ecctrl/src/stores/useGame.ts:11:21 - error TS2352: Conversion of type 'null' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

11       curAnimation: null as string,
                       ~~~~~~~~~~~~~~
ErdongChen-Andrew commented 8 months ago

Emm.. I personally haven't encountered this issue before. Would you mind showing your vite config setup? Hopefully, we can find something there. 🤔

xorander00 commented 8 months ago

Just wanted to chime in and add that I ran into the same issue just now. Will investigate here shortly.

xorander00 commented 8 months ago

@jeremiasjutz Make sure strictNullChecks is false in tsconfig.json.

Also, the latest version of @types/three is 0.157.2, while the latest version of three is 0.157.0. Downgrading to @types/three@0.157.0 to match the three version fixed most of the problems (so far).

Though I'm trying to figure out why it's complaining that "'Ecctrl' cannot be used as a JSX component." I can see in the source that it's a default export, so that shouldn't be a problem. I'm guessing maybe it has something to do with ejs vs cjs modules or whatnot.

xorander00 commented 8 months ago

export * from ../src/Ecctrl.tsx was the problem in Ecctrl.d.ts. Generating an actual type declaration file using tsc fixed the problem. Not sure which configuration is tripping it up, but will look at it later.

jeremiasjutz commented 8 months ago

Thanks for your quick replies! I added strictNullChecks to my tsconfig.json and now most of the errors have disappeared. I only get 3 errors now:

> tsc && vite build

node_modules/.pnpm/ecctrl@1.0.36_@react-three+fiber@8.15.4_@types+react-dom@18.2.14_@types+react@18.2.31_@types+_khx5ir5ed2ombljuz23i2atgs4/node_modules/ecctrl/src/Ecctrl.tsx:88:9 - error TS6133: 'jumpLandAnimation' is declared but its value is never read.

88   const jumpLandAnimation = !animated
           ~~~~~~~~~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.36_@react-three+fiber@8.15.4_@types+react-dom@18.2.14_@types+react@18.2.31_@types+_khx5ir5ed2ombljuz23i2atgs4/node_modules/ecctrl/src/Ecctrl.tsx:384:18 - error TS6133: 'followCam' is declared but its value is never read.

384   const { pivot, followCam, cameraCollisionDetect } =
                     ~~~~~~~~~

node_modules/.pnpm/ecctrl@1.0.36_@react-three+fiber@8.15.4_@types+react-dom@18.2.14_@types+react@18.2.31_@types+_khx5ir5ed2ombljuz23i2atgs4/node_modules/ecctrl/src/EcctrlAnimation.tsx:5:27 - error TS2307: Cannot find module 'three/examples/jsm/loaders/GLTFLoader' or its corresponding type declarations.

5 import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader";
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 3 errors in 2 files.

Errors  Files
     2  node_modules/.pnpm/ecctrl@1.0.36_@react-three+fiber@8.15.4_@types+react-dom@18.2.14_@types+react@18.2.31_@types+_khx5ir5ed2ombljuz23i2atgs4/node_modules/ecctrl/src/Ecctrl.tsx:88
     1  node_modules/.pnpm/ecctrl@1.0.36_@react-three+fiber@8.15.4_@types+react-dom@18.2.14_@types+react@18.2.31_@types+_khx5ir5ed2ombljuz23i2atgs4/node_modules/ecctrl/src/EcctrlAnimation.tsx:5
 ELIFECYCLE  Command failed with exit code 2.

my tsconfig:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "strictNullChecks": false,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

my package.json:

{
  "name": "game",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@react-three/drei": "^9.88.5",
    "@react-three/fiber": "^8.15.4",
    "@react-three/rapier": "^1.1.2",
    "ecctrl": "^1.0.36",
    "leva": "^0.9.35",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "three": "^0.157.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.31",
    "@types/react-dom": "^18.2.14",
    "@types/three": "^0.157.0",
    "@typescript-eslint/eslint-plugin": "^6.8.0",
    "@typescript-eslint/parser": "^6.8.0",
    "@vitejs/plugin-react-swc": "^3.4.0",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.52.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "prettier-plugin-organize-imports": "^3.2.3",
    "prettier-plugin-tailwindcss": "^0.5.6",
    "r3f-perf": "^7.1.2",
    "tailwindcss": "^3.3.3",
    "three-stdlib": "^2.28.0",
    "typescript": "^5.2.2",
    "vite": "^4.5.0"
  }
}
jeremiasjutz commented 8 months ago

Any update on this?

ErdongChen-Andrew commented 8 months ago

@jeremiasjutz, give version 1.0.41 a try. Hopefully, that issue has been fixed 😅

tomasgrusz commented 8 months ago

Using Ecctrl in my Next 14 project, I am getting the following ts error:

Unhandled Runtime Error TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))

Also getting this error on the <Ecctrl /> component JSX element type 'Ecctrl' does not have any construct or call signatures.ts(2604) 'Ecctrl' cannot be used as a JSX component.

This is my code:

import PlayerModel from './Player.model';
import Ecctrl from 'ecctrl';
import { useMemo } from 'react';

enum Controls {
  forward = 'forward',
  backward = 'backward',
  leftward = 'leftward',
  rightward = 'rightward',
  jump = 'jump',
  run = 'run',
}

const Player = () => {
  /**
   * Keyboard control preset
   */
  const keyboardMap = useMemo<KeyboardControlsEntry<Controls>[]>(
    () => [
      { name: Controls.forward, keys: ['ArrowUp', 'KeyW'] },
      { name: Controls.backward, keys: ['ArrowDown', 'KeyS'] },
      { name: Controls.leftward, keys: ['ArrowLeft', 'KeyA'] },
      { name: Controls.rightward, keys: ['ArrowRight', 'KeyD'] },
      { name: Controls.jump, keys: ['Space'] },
      { name: Controls.run, keys: ['Shift'] },
    ],
    [],
  );

  return (
    <KeyboardControls map={keyboardMap}>
      {/* @ts-ignore */}
      <Ecctrl debug>
        <PlayerModel />
      </Ecctrl>
    </KeyboardControls>
  );
};

export default Player;

Package versions:

"@react-three/drei": "^9.88.11",
"@react-three/fiber": "^8.15.9",
"@react-three/postprocessing": "^2.15.10",
"@react-three/rapier": "^1.1.2",
"ecctrl": "^1.0.41",
"three": "^0.158.0",
"@types/three": "^0.158.0"

Call Stack:

React
node_modules/ecctrl/node_modules/@react-three/drei/web/KeyboardControls.js (100:28)
useKeyboardControls
node_modules/ecctrl/dist/Ecctrl.js (575:54)
renderWithHooks
node_modules/react-reconciler/cjs/react-reconciler.development.js (7363:0)
updateForwardRef
node_modules/react-reconciler/cjs/react-reconciler.development.js (11457:0)
beginWork
node_modules/react-reconciler/cjs/react-reconciler.development.js (13880:0)
beginWork$1
node_modules/react-reconciler/cjs/react-reconciler.development.js (19513:0)
performUnitOfWork
node_modules/react-reconciler/cjs/react-reconciler.development.js (18686:0)
workLoopSync
node_modules/react-reconciler/cjs/react-reconciler.development.js (18597:0)
renderRootSync
node_modules/react-reconciler/cjs/react-reconciler.development.js (18565:0)
recoverFromConcurrentError
node_modules/react-reconciler/cjs/react-reconciler.development.js (17948:0)
performConcurrentWorkOnRoot
node_modules/react-reconciler/cjs/react-reconciler.development.js (17848:0)
ErdongChen-Andrew commented 8 months ago

@tomasgrusz , not quite sure why 🤔. Maybe try Next version 13.4.19, see if that works?