react-three-fiber icon indicating copy to clipboard operation
react-three-fiber copied to clipboard

Typescript Error with Geometry props

Open Thangouliou opened this issue 9 months ago • 5 comments

👋 hi there, for issues that aren't that pressing, that could be related to threejs etc, please consider github discussions.

TypeScript Error with boxGeometry props

I'm getting TypeScript errors when trying to use boxGeometry component:

<boxGeometry args={[1, 1, 1]} />

Error:

Using React Native with Expo and TypeScript. Package versions:

  • @react-three/fiber: ^9.1.0
  • three: ^0.174.0
  • typescript: ^5.3.3

Could you please help with the correct type definitions for the boxGeometry component?

can you help me??

Thangouliou avatar Mar 22 '25 16:03 Thangouliou

Is it typescript or eslint error in your case? Now I'm getting ESLint: Unknown property 'intensity' found(react/no-unknown-property) for all the props, but it compiles ok.

"eslint": "^8.41.0",

mordv avatar Mar 23 '25 16:03 mordv

I'm facing the same problem with ESLint error "Unknown property 'args' found".

I tried changing:

<boxGeometry args={[1, 1, 1]} />

to:

<boxGeometry primitive={[1, 1, 1]} />

But the problem persists. The suggested solution is to add the following ESLint rule to .eslintrc.js:

"react/no-unknown-property": ["error", { 
ignore: ["args", "intensity", "position", "rotation", "scale"] 
}]

Is there a better solution for this problem? args seems to be the correct property according to the Three.js documentation.

Thangouliou avatar Mar 23 '25 18:03 Thangouliou

Hello, to help out I need to know a little more info.

  1. What is the TypeScript error you are getting exactly?
  2. For ESLint, I need to be able to reproduce the issue. Is there a minimal reproduction? When doing a vite install, ESLint works for me.

krispya avatar Mar 24 '25 15:03 krispya

I didn't get the TS error. But I got the same eslint error.

ERROR(ESLint) Unknown property 'map' found (react/no-unknown-property)

<mesh> <planeGeometry args={[width || texture?.image?.width, height || texture?.image?.height]} /> <meshStandardMaterial map={texture} /> </mesh> My eslint version is 9.21.0.

pjh714332048 avatar Apr 02 '25 09:04 pjh714332048

I'm facing the same problem with ESLint error "Unknown property 'args' found".

I tried changing:

<boxGeometry args={[1, 1, 1]} /> to:

<boxGeometry primitive={[1, 1, 1]} /> But the problem persists. The suggested solution is to add the following ESLint rule to .eslintrc.js:

"react/no-unknown-property": ["error", { ignore: ["args", "intensity", "position", "rotation", "scale"] }] Is there a better solution for this problem? args seems to be the correct property according to the Three.js documentation.

This problem is bothering me a lot, but it seems that using "ignore" is still the current solution.

https://github.com/pmndrs/react-three-fiber/issues/2623 https://github.com/jsx-eslint/eslint-plugin-react/issues/3423

zwhid avatar Sep 12 '25 01:09 zwhid