Error when attempting to use DragControls: Uncaught TypeError: defaultControls is null

[nene]

• three version: 0.161.0
• @react-three/fiber version: 8.15.16
• @react-three/drei version: 9.99.3
• node version: 20.8.0
• npm version: 10.1.0
• browser: Firefox (also tried with Chrome)

Problem description:

I tried to use the DragControls component. As I understand, I just need to wrap a mesh inside it.

The dragging actually works, but in browser console I see an error:

Uncaught TypeError: defaultControls is null                   DragControls.js:100:6

    onDragEnd DragControls.js:100
    fn use-gesture-core.esm.js:309
    emit actions-fe213e88.esm.js:414
    pointerUp actions-fe213e88.esm.js:748
    onIntersect index-8afac004.esm.js:1213
    handleIntersects index-8afac004.esm.js:1065
    handleEvent index-8afac004.esm.js:1223
    connect react-three-fiber.esm.js:69
    connect react-three-fiber.esm.js:67
    onCreated react-three-fiber.esm.js:170
    Provider index-8afac004.esm.js:2050
    commitHookEffectListMount react-reconciler.development.js:14669
    commitLayoutEffectOnFiber react-reconciler.development.js:14781
    commitLayoutMountEffects_complete react-reconciler.development.js:16290
    commitLayoutEffects_begin react-reconciler.development.js:16267
    commitLayoutEffects react-reconciler.development.js:16214
    commitRootImpl react-reconciler.development.js:18945
    commitRoot react-reconciler.development.js:18811
    finishConcurrentRender react-reconciler.development.js:18079
    performConcurrentWorkOnRoot react-reconciler.development.js:17907
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-UV5CTPV7.js:9
    js index.js:6
    __require chunk-UV5CTPV7.js:9
    $$$reconciler react-reconciler.development.js:19
    createRenderer index-8afac004.esm.js:218
    <anonymous> index-8afac004.esm.js:1718

Relevant code:

export function MyComp() {
  return (
    <Canvas camera={{ position: [5, 5, 5] }}>
      <ambientLight intensity={Math.PI / 2} />

      <DragControls>
        <mesh position={[-1.2, 0.5, 0]}>
          <boxGeometry args={[1, 1, 1]} />
          <meshStandardMaterial color={"red"} />
        </mesh>
      </DragControls>

    </Canvas>
  );
}

I must be doing something obvious very wrong, but I have no idea what I must be missing.

[nene]

I see a suspicious typescript comment in DragControls.tsx:

    // @ts-expect-error new in @react-three/fiber@7.0.5
    const defaultControls = useThree((state) => state.controls) as ControlsProto

[nene]

I can successfully use the PivotControls without any errors, so I think I don't have a fundamental issue with my setup. It must be something specific about DragControls.

[nene]

I patched the DragControls component by wrapping the following lines:

defaultControls.enabled = false;

with null checks:

if (defaultControls) {
  defaultControls.enabled = false;
}

Though I have no idea what other implications this change might have. But at least it eliminates the null exceptions.

[github-actions[bot]]

:tada: This issue has been resolved in version 9.99.4 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[nene]

Awesome! Thanks a lot!