Completion not working on Jetbrain's Webstorm due to IntrinsicElements declaration in three-types.d.ts

[AxiomeCG]

Hi,

The way r3f handles the types in three-types.d.ts is not working for Jetbrain's Webstorm completion with typescript.

declare global {
    namespace JSX {
        interface IntrinsicElements extends ThreeElements {

        }
    }
}

I'm forced to create my own fiber-types.d.ts at the root of the project and to copy paste every property of the interface ThreeElements.

declare global {
  namespace JSX {
    interface IntrinsicElements {
      object3D: Object3DProps;
      audioListener: AudioListenerProps;
      positionalAudio: PositionalAudioProps;
      mesh: MeshProps;
      instancedMesh: InstancedMeshProps;
      scene: SceneProps;
      sprite: SpriteProps;
      lOD: LODProps;
      skinnedMesh: SkinnedMeshProps;
      skeleton: SkeletonProps;
      bone: BoneProps;
      lineSegments: LineSegmentsProps;
      lineLoop: LineLoopProps;
      points: PointsProps;
      group: GroupProps;
      camera: CameraProps;
      perspectiveCamera: PerspectiveCameraProps;
      orthographicCamera: OrthographicCameraProps;
      cubeCamera: CubeCameraProps;
      arrayCamera: ArrayCameraProps;
      instancedBufferGeometry: InstancedBufferGeometryProps;
      bufferGeometry: BufferGeometryProps;
      boxBufferGeometry: BoxBufferGeometryProps;
      circleBufferGeometry: CircleBufferGeometryProps;
      coneBufferGeometry: ConeBufferGeometryProps;
      cylinderBufferGeometry: CylinderBufferGeometryProps;
      dodecahedronBufferGeometry: DodecahedronBufferGeometryProps;
      extrudeBufferGeometry: ExtrudeBufferGeometryProps;
      icosahedronBufferGeometry: IcosahedronBufferGeometryProps;
      latheBufferGeometry: LatheBufferGeometryProps;
      octahedronBufferGeometry: OctahedronBufferGeometryProps;
      planeBufferGeometry: PlaneBufferGeometryProps;
      polyhedronBufferGeometry: PolyhedronBufferGeometryProps;
      ringBufferGeometry: RingBufferGeometryProps;
      shapeBufferGeometry: ShapeBufferGeometryProps;
      sphereBufferGeometry: SphereBufferGeometryProps;
      tetrahedronBufferGeometry: TetrahedronBufferGeometryProps;
      torusBufferGeometry: TorusBufferGeometryProps;
      torusKnotBufferGeometry: TorusKnotBufferGeometryProps;
      tubeBufferGeometry: TubeBufferGeometryProps;
      wireframeGeometry: WireframeGeometryProps;
      tetrahedronGeometry: TetrahedronGeometryProps;
      octahedronGeometry: OctahedronGeometryProps;
      icosahedronGeometry: IcosahedronGeometryProps;
      dodecahedronGeometry: DodecahedronGeometryProps;
      polyhedronGeometry: PolyhedronGeometryProps;
      tubeGeometry: TubeGeometryProps;
      torusKnotGeometry: TorusKnotGeometryProps;
      torusGeometry: TorusGeometryProps;
      sphereGeometry: SphereGeometryProps;
      ringGeometry: RingGeometryProps;
      planeGeometry: PlaneGeometryProps;
      latheGeometry: LatheGeometryProps;
      shapeGeometry: ShapeGeometryProps;
      extrudeGeometry: ExtrudeGeometryProps;
      edgesGeometry: EdgesGeometryProps;
      coneGeometry: ConeGeometryProps;
      cylinderGeometry: CylinderGeometryProps;
      circleGeometry: CircleGeometryProps;
      boxGeometry: BoxGeometryProps;
      capsuleGeometry: CapsuleGeometryProps;
      material: MaterialProps;
      shadowMaterial: ShadowMaterialProps;
      spriteMaterial: SpriteMaterialProps;
      rawShaderMaterial: RawShaderMaterialProps;
      shaderMaterial: ShaderMaterialProps;
      pointsMaterial: PointsMaterialProps;
      meshPhysicalMaterial: MeshPhysicalMaterialProps;
      meshStandardMaterial: MeshStandardMaterialProps;
      meshPhongMaterial: MeshPhongMaterialProps;
      meshToonMaterial: MeshToonMaterialProps;
      meshNormalMaterial: MeshNormalMaterialProps;
      meshLambertMaterial: MeshLambertMaterialProps;
      meshDepthMaterial: MeshDepthMaterialProps;
      meshDistanceMaterial: MeshDistanceMaterialProps;
      meshBasicMaterial: MeshBasicMaterialProps;
      meshMatcapMaterial: MeshMatcapMaterialProps;
      lineDashedMaterial: LineDashedMaterialProps;
      lineBasicMaterial: LineBasicMaterialProps;
      primitive: PrimitiveProps;
      light: LightProps;
      spotLightShadow: SpotLightShadowProps;
      spotLight: SpotLightProps;
      pointLight: PointLightProps;
      rectAreaLight: RectAreaLightProps;
      hemisphereLight: HemisphereLightProps;
      directionalLightShadow: DirectionalLightShadowProps;
      directionalLight: DirectionalLightProps;
      ambientLight: AmbientLightProps;
      lightShadow: LightShadowProps;
      ambientLightProbe: AmbientLightProbeProps;
      hemisphereLightProbe: HemisphereLightProbeProps;
      lightProbe: LightProbeProps;
      spotLightHelper: SpotLightHelperProps;
      skeletonHelper: SkeletonHelperProps;
      pointLightHelper: PointLightHelperProps;
      hemisphereLightHelper: HemisphereLightHelperProps;
      gridHelper: GridHelperProps;
      polarGridHelper: PolarGridHelperProps;
      directionalLightHelper: DirectionalLightHelperProps;
      cameraHelper: CameraHelperProps;
      boxHelper: BoxHelperProps;
      box3Helper: Box3HelperProps;
      planeHelper: PlaneHelperProps;
      arrowHelper: ArrowHelperProps;
      axesHelper: AxesHelperProps;
      texture: TextureProps;
      videoTexture: VideoTextureProps;
      dataTexture: DataTextureProps;
      dataTexture3D: DataTexture3DProps;
      compressedTexture: CompressedTextureProps;
      cubeTexture: CubeTextureProps;
      canvasTexture: CanvasTextureProps;
      depthTexture: DepthTextureProps;
      raycaster: RaycasterProps;
      vector2: Vector2Props;
      vector3: Vector3Props;
      vector4: Vector4Props;
      euler: EulerProps;
      matrix3: Matrix3Props;
      matrix4: Matrix4Props;
      quaternion: QuaternionProps;
      bufferAttribute: BufferAttributeProps;
      float16BufferAttribute: Float16BufferAttributeProps;
      float32BufferAttribute: Float32BufferAttributeProps;
      float64BufferAttribute: Float64BufferAttributeProps;
      int8BufferAttribute: Int8BufferAttributeProps;
      int16BufferAttribute: Int16BufferAttributeProps;
      int32BufferAttribute: Int32BufferAttributeProps;
      uint8BufferAttribute: Uint8BufferAttributeProps;
      uint16BufferAttribute: Uint16BufferAttributeProps;
      uint32BufferAttribute: Uint32BufferAttributeProps;
      instancedBufferAttribute: InstancedBufferAttributeProps;
      color: ColorProps;
      fog: FogProps;
      fogExp2: FogExp2Props;
      shape: ShapeProps;
    }
  }
}

Do you know any workaround ? I'm new to React ecosystem, so I don't know if it is an issue from r3f or if it is an issue from Webstorm itself. From my researches, I didn't see this way of handling the IntrinsicElements anywhere else.

Any ideas?

[jadeworks-dev]

I am also a Webstorm user. It seems to be a problem caused by the version upgrade of R3F. Version 8.0.10 did not have this problem.

[AxiomeCG]

I opened a ticket on Webstorm bug tracker that you can like and comment here
https://youtrack.jetbrains.com/issue/WEB-56801

Basically it can be either solved by R3F by not doing this extends in the three-types.d.ts

But they will certainly say "Not my problem, it is your IDE that is not working fine, in VS Code it is working"

So basically, we need to pray that Webstorm developers fix this bug, just because R3F is not using a conventional way of declaring the JSX namespace. It's been like already 3 months and no one seems to care.

Webstorm on its side is thinking "it happens on just one lib that we don't really care, so it is not a major bug"
R3F is thinking "it happens on one IDE that we don't really care, so we won't be changing the way we do thing".
It is how I feel about this whole thing.

So as a Webstorm user, we are screwed. So I'm manually declaring a d.ts file at the root of my project to have access to the completion. It is reaaaaaaally an hack, on the next update I would need to keep this file up to date, but no one really cares about us on both side.

[ngocducdim]

My hot fix:
(put at the root of the project, I named it as react-three-fiber-webstorm-fix.d.ts)

import * as ThreeProps from "@react-three/fiber/dist/declarations/src/three-types";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      object3D: ThreeProps.Object3DProps;
      audioListener: ThreeProps.AudioListenerProps;
      positionalAudio: ThreeProps.PositionalAudioProps;
      mesh: ThreeProps.MeshProps;
      instancedMesh: ThreeProps.InstancedMeshProps;
      scene: ThreeProps.SceneProps;
      sprite: ThreeProps.SpriteProps;
      lOD: ThreeProps.LODProps;
      skinnedMesh: ThreeProps.SkinnedMeshProps;
      skeleton: ThreeProps.SkeletonProps;
      bone: ThreeProps.BoneProps;
      lineSegments: ThreeProps.LineSegmentsProps;
      lineLoop: ThreeProps.LineLoopProps;
      points: ThreeProps.PointsProps;
      group: ThreeProps.GroupProps;
      camera: ThreeProps.CameraProps;
      perspectiveCamera: ThreeProps.PerspectiveCameraProps;
      orthographicCamera: ThreeProps.OrthographicCameraProps;
      cubeCamera: ThreeProps.CubeCameraProps;
      arrayCamera: ThreeProps.ArrayCameraProps;
      instancedBufferGeometry: ThreeProps.InstancedBufferGeometryProps;
      bufferGeometry: ThreeProps.BufferGeometryProps;
      boxBufferGeometry: ThreeProps.BoxBufferGeometryProps;
      circleBufferGeometry: ThreeProps.CircleBufferGeometryProps;
      coneBufferGeometry: ThreeProps.ConeBufferGeometryProps;
      cylinderBufferGeometry: ThreeProps.CylinderBufferGeometryProps;
      dodecahedronBufferGeometry: ThreeProps.DodecahedronBufferGeometryProps;
      extrudeBufferGeometry: ThreeProps.ExtrudeBufferGeometryProps;
      icosahedronBufferGeometry: ThreeProps.IcosahedronBufferGeometryProps;
      latheBufferGeometry: ThreeProps.LatheBufferGeometryProps;
      octahedronBufferGeometry: ThreeProps.OctahedronBufferGeometryProps;
      planeBufferGeometry: ThreeProps.PlaneBufferGeometryProps;
      polyhedronBufferGeometry: ThreeProps.PolyhedronBufferGeometryProps;
      ringBufferGeometry: ThreeProps.RingBufferGeometryProps;
      shapeBufferGeometry: ThreeProps.ShapeBufferGeometryProps;
      sphereBufferGeometry: ThreeProps.SphereBufferGeometryProps;
      tetrahedronBufferGeometry: ThreeProps.TetrahedronBufferGeometryProps;
      torusBufferGeometry: ThreeProps.TorusBufferGeometryProps;
      torusKnotBufferGeometry: ThreeProps.TorusKnotBufferGeometryProps;
      tubeBufferGeometry: ThreeProps.TubeBufferGeometryProps;
      wireframeGeometry: ThreeProps.WireframeGeometryProps;
      tetrahedronGeometry: ThreeProps.TetrahedronGeometryProps;
      octahedronGeometry: ThreeProps.OctahedronGeometryProps;
      icosahedronGeometry: ThreeProps.IcosahedronGeometryProps;
      dodecahedronGeometry: ThreeProps.DodecahedronGeometryProps;
      polyhedronGeometry: ThreeProps.PolyhedronGeometryProps;
      tubeGeometry: ThreeProps.TubeGeometryProps;
      torusKnotGeometry: ThreeProps.TorusKnotGeometryProps;
      torusGeometry: ThreeProps.TorusGeometryProps;
      sphereGeometry: ThreeProps.SphereGeometryProps;
      ringGeometry: ThreeProps.RingGeometryProps;
      planeGeometry: ThreeProps.PlaneGeometryProps;
      latheGeometry: ThreeProps.LatheGeometryProps;
      shapeGeometry: ThreeProps.ShapeGeometryProps;
      extrudeGeometry: ThreeProps.ExtrudeGeometryProps;
      edgesGeometry: ThreeProps.EdgesGeometryProps;
      coneGeometry: ThreeProps.ConeGeometryProps;
      cylinderGeometry: ThreeProps.CylinderGeometryProps;
      circleGeometry: ThreeProps.CircleGeometryProps;
      boxGeometry: ThreeProps.BoxGeometryProps;
      capsuleGeometry: ThreeProps.CapsuleGeometryProps;
      material: ThreeProps.MaterialProps;
      shadowMaterial: ThreeProps.ShadowMaterialProps;
      spriteMaterial: ThreeProps.SpriteMaterialProps;
      rawShaderMaterial: ThreeProps.RawShaderMaterialProps;
      shaderMaterial: ThreeProps.ShaderMaterialProps;
      pointsMaterial: ThreeProps.PointsMaterialProps;
      meshPhysicalMaterial: ThreeProps.MeshPhysicalMaterialProps;
      meshStandardMaterial: ThreeProps.MeshStandardMaterialProps;
      meshPhongMaterial: ThreeProps.MeshPhongMaterialProps;
      meshToonMaterial: ThreeProps.MeshToonMaterialProps;
      meshNormalMaterial: ThreeProps.MeshNormalMaterialProps;
      meshLambertMaterial: ThreeProps.MeshLambertMaterialProps;
      meshDepthMaterial: ThreeProps.MeshDepthMaterialProps;
      meshDistanceMaterial: ThreeProps.MeshDistanceMaterialProps;
      meshBasicMaterial: ThreeProps.MeshBasicMaterialProps;
      meshMatcapMaterial: ThreeProps.MeshMatcapMaterialProps;
      lineDashedMaterial: ThreeProps.LineDashedMaterialProps;
      lineBasicMaterial: ThreeProps.LineBasicMaterialProps;
      primitive: ThreeProps.PrimitiveProps;
      light: ThreeProps.LightProps;
      spotLightShadow: ThreeProps.SpotLightShadowProps;
      spotLight: ThreeProps.SpotLightProps;
      pointLight: ThreeProps.PointLightProps;
      rectAreaLight: ThreeProps.RectAreaLightProps;
      hemisphereLight: ThreeProps.HemisphereLightProps;
      directionalLightShadow: ThreeProps.DirectionalLightShadowProps;
      directionalLight: ThreeProps.DirectionalLightProps;
      ambientLight: ThreeProps.AmbientLightProps;
      lightShadow: ThreeProps.LightShadowProps;
      ambientLightProbe: ThreeProps.AmbientLightProbeProps;
      hemisphereLightProbe: ThreeProps.HemisphereLightProbeProps;
      lightProbe: ThreeProps.LightProbeProps;
      spotLightHelper: ThreeProps.SpotLightHelperProps;
      skeletonHelper: ThreeProps.SkeletonHelperProps;
      pointLightHelper: ThreeProps.PointLightHelperProps;
      hemisphereLightHelper: ThreeProps.HemisphereLightHelperProps;
      gridHelper: ThreeProps.GridHelperProps;
      polarGridHelper: ThreeProps.PolarGridHelperProps;
      directionalLightHelper: ThreeProps.DirectionalLightHelperProps;
      cameraHelper: ThreeProps.CameraHelperProps;
      boxHelper: ThreeProps.BoxHelperProps;
      box3Helper: ThreeProps.Box3HelperProps;
      planeHelper: ThreeProps.PlaneHelperProps;
      arrowHelper: ThreeProps.ArrowHelperProps;
      axesHelper: ThreeProps.AxesHelperProps;
      texture: ThreeProps.TextureProps;
      videoTexture: ThreeProps.VideoTextureProps;
      dataTexture: ThreeProps.DataTextureProps;
      dataTexture3D: ThreeProps.DataTexture3DProps;
      compressedTexture: ThreeProps.CompressedTextureProps;
      cubeTexture: ThreeProps.CubeTextureProps;
      canvasTexture: ThreeProps.CanvasTextureProps;
      depthTexture: ThreeProps.DepthTextureProps;
      raycaster: ThreeProps.RaycasterProps;
      vector2: ThreeProps.Vector2Props;
      vector3: ThreeProps.Vector3Props;
      vector4: ThreeProps.Vector4Props;
      euler: ThreeProps.EulerProps;
      matrix3: ThreeProps.Matrix3Props;
      matrix4: ThreeProps.Matrix4Props;
      quaternion: ThreeProps.QuaternionProps;
      bufferAttribute: ThreeProps.BufferAttributeProps;
      float16BufferAttribute: ThreeProps.Float16BufferAttributeProps;
      float32BufferAttribute: ThreeProps.Float32BufferAttributeProps;
      float64BufferAttribute: ThreeProps.Float64BufferAttributeProps;
      int8BufferAttribute: ThreeProps.Int8BufferAttributeProps;
      int16BufferAttribute: ThreeProps.Int16BufferAttributeProps;
      int32BufferAttribute: ThreeProps.Int32BufferAttributeProps;
      uint8BufferAttribute: ThreeProps.Uint8BufferAttributeProps;
      uint16BufferAttribute: ThreeProps.Uint16BufferAttributeProps;
      uint32BufferAttribute: ThreeProps.Uint32BufferAttributeProps;
      instancedBufferAttribute: ThreeProps.InstancedBufferAttributeProps;
      color: ThreeProps.ColorProps;
      fog: ThreeProps.FogProps;
      fogExp2: ThreeProps.FogExp2Props;
      shape: ThreeProps.ShapeProps;
    }
  }
}

[FraserKemp]

Worked a treat for me thank you!

[phaethon5882]

It works like a charm 🥹 in Intellij too.

[GabLeRoux]

I confirm that this was solved in 2023.2. The linked Webstorm bug from this message is a duplicate of this one

I confirm that the typing works fine in IntelliJ 2023.2 👍
This thread can be marked as resolved.

[rsalzer]

Its still not working for me in Webstorm 2023.2.4.
I am using this starter-package and there is no code completion available ... https://github.com/wass08/r3f-vite-starter
Also the workaround does not do anything for me. Is it enough to copy the types into the root folder?

[kuba44]

The workaround also doesn't work for me, can someone confirm it works for them?

[rsalzer]

My workaround at the moment is to import React in the file I want code completion to work.

So just add import React from 'react' and magically code completion works for Fiber-related items like <group>, <mesh> etc.

[tanmaster]

I suffer from the same issue in IntelliJ IDEA 2024.2.4. I am also using vite. The workaround from @ngocducdim is working, the others are not.