react-three-fiber: Conflict with @types/react svg types in JSX.IntrinsicElements

Hi! I’ve encountered a little problem while using react-three-fiber in TypeScript. @types/react conflicts with three-types.d.ts on global JSX.IntrinsicElements.

Is there a workaround to avoid it?

(property) JSX.IntrinsicElements.line: React.SVGProps<SVGLineElement>
Subsequent property declarations must have the same type. 
Property 'line' must be of type 'SVGProps<SVGLineElement>',
but here has type 'Object3DNode<Line, typeof Line>'.
ts(2717)

Repro: https://codesandbox.io/s/react-three-fiber-types-conflict-repro-ydr2t (CodeSandbox seems to be few TS versions behind so there’s another problem there – Omit type is not defined, and because of it Object3DNode is any. The conflict I mentioned still occurs regardless of it.)

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 22 (22 by maintainers)

Most upvoted comments

this is our config, i didn’t make it so im just posting it here:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es5", "es2015.promise", "es2016", "dom"],
    "outDir": "build/",
    "baseUrl": "./",
    "strict": true,
    "allowJs": false,
    "declaration": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "noImplicitAny": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "jsx": "react"
  },
  "include": ["./src/**/*"]
}

drcmda on Oct 12, 2019

https://github.com/pmndrs/react-three-fiber/issues/1152

drcmda on Apr 15, 2021

@codynova I’m afraid you’d have to wait to next weekend for my PR.

hasparus on Oct 12, 2019

@codynova Yeah and after you do this you’d have to add extend({ line_: THREE.Line }) to your code or the patch-packaged react-3-fiber to map line_ to THREE.Line.

I’ll try to do a PR with React Native inspired (https://github.com/react-spring/react-three-fiber/issues/172#issuecomment-522887899) fix for this issue.

EDIT: Actually if I’m right about how react-three-fiber dynamic runtime eval works, instead of using extend you could monkey patch (THREE as any).Line_ = THREE.Line 😆

hasparus on Oct 12, 2019

i reopened b/c that would be a feasible thing we could do. maybe a 3.x milestone? im still on vacation, but let’s just keep this around, it could solve all our troubles. 😃

drcmda on Aug 22, 2019