useGLTF preload types have changed, previously useDraco and useMeshOpt were optional

[chrisweb]

• three version: 0.169.0
• @react-three/fiber version: 8.17.9
• @react-three/drei version: 9.114.2
• node version: 20.12.2
• npm (or yarn) version: 10.8.3

Problem description:

useGLTF preload types have changed, previously useDraco and useMeshOpt were optional

Relevant code:

The useGLTF preload types always specified that useDraco and useMeshOpt are optional, however the latest changes that got published in v9.114.1 made useDraco and useMeshOpt mandatory

In the previous code prior to the update, the default values were set in the type definition:

  useDraco: boolean | string = true,
  useMeshOpt: boolean = true,

As typescript detected that there was a default value (= true) it would set useDraco and useMeshOpt automatically to optional

However in the new code after the update we now have this:

type UseDraco = boolean | string
type UseMeshopt = boolean

(...)

useGLTF.preload = (path: Path, useDraco: UseDraco, useMeshopt: UseMeshopt, extendLoader?: ExtendLoader) =>
  useLoader.preload(GLTFLoader, path, extensions(useDraco, useMeshopt, extendLoader))

because of the new code, typescript does NOT make useDraco and useMeshopt optional anymore

Suggested solution:

make useDraco, useMeshopt optional manually, by adding a questionmark to both

I created a PR with the suggested in fix in case you wish to accept the suggested solution: PR #2119

[harryparkinson101]

Comment for GitHub Issue/PR

Hi there,

I encountered an issue related to the recent changes in the useGLTF.preload types while working on our project, and your repository has been incredibly helpful!

Environment Details:

• **@react-three/drei": "^9.114.2",
• **@react-three/fiber": "^8.17.9",
• Node version: 21.0.0
• NPM version: 10.2.0

Problem Description:

With the latest changes in version 9.114.1, the types for useGLTF.preload have shifted. Previously, the useDraco and useMeshOpt parameters were optional due to their default values being set in the type definition:

import { useGLTF } from '@react-three/drei';

// Custom preload function with optional parameters
const customUseGLTFPreload = (
  path: string,
  useDraco?: boolean | string,
  useMeshOpt?: boolean
) => {
  useGLTF.preload(path, useDraco ?? true, useMeshOpt ?? true);
};

// Usage example
customUseGLTFPreload("/models/animations/developer.glb");