Radial gradient not working as expected with typescript

[Betanoir]

• three version: 0.164.1
• @react-three/fiber version: 8.16.6
• @react-three/drei version: 9.105.6
• node version: 21.7.3
• npm version: 10.2.1

Problem description:

I've used the documentation found in Drei's ReadMe file to create a radial gradient; however, I'm using typescript and an error is popping up no matter what I try to do.

The error only occurs when using the GradientType.Radial

Relevant code:

<mesh ref={ref} position={[props.x, props.y, 0]}>
    <boxGeometry args={[cubeSize, cubeSize, cubeSize]} />
    <meshBasicMaterial>
        <GradientTexture
            stops={[0, 0.8]}
            colors={['#0090ff', 'black']}
            size={1024}
            width={1024}
            type={GradientType.Radial}
             ^
        />
    </meshBasicMaterial>
</mesh>

The error that shows when hovering over type = {GradientType.Radial} is as follows:

Type 'GradientType.Radial' is not assignable to type 'undefined'.ts(2322)
GradientTexture.d.ts(12, 5): The expected type comes from property 'type' which is declared here on type 'IntrinsicAttributes & { stops: number[]; colors: string[]; attach?: string | undefined; size?: number | undefined; width?: number | undefined; type?: GradientType | undefined; innerCircleRadius?: number | undefined; outerCircleRadius?: string | ... 1 more ... | undefined; } & ExtendedColors<...>'
(property) type?: undefined

Suggested solution:

I have searched everywhere trying to find the solution and I've found nothing. The file mentioned in the error contains the following:

// GradientTexture.d.ts
import * as React from 'react';
export declare enum GradientType {
    Linear = "linear",
    Radial = "radial"
}
type Props = {
    stops: Array<number>;
    colors: Array<string>;
    attach?: string;
    size?: number;
    width?: number;
    type?: GradientType;
    innerCircleRadius?: number;
    outerCircleRadius?: string | number;
} & JSX.IntrinsicElements['texture'];
export declare function GradientTexture({ stops, colors, size, width, type, innerCircleRadius, outerCircleRadius, ...props }: Props): React.JSX.Element;
export {};

Any help would be appreciated!

[CodyJasonBennett]

Maybe related to pmndrs/react-three-fiber#3270.

[github-actions]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!