pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.64k stars 1.6k forks source link

8.16.5 has breaking types changes #3270

Closed yaroslavnikiforov closed 5 months ago

yaroslavnikiforov commented 6 months ago

Originally titled: "Property 'div' does not exist on type 'JSX.IntrinsicElements'."

Version 8.16.5 has breaking changes and brings a batch of TS errors like: Property 'div' does not exist on type 'JSX.IntrinsicElements'.

Type '{ dpr: number; camera: { fov: number; near: number; far: number; zoom: number; }; gl: { antialias: false; powerPreference: string; }; frameloop: Frameloop; }' is not assignable to type 'Props & RefAttributes<HTMLCanvasElement>'.

Property 'children' is missing in type '{ dpr: number; camera: { fov: number; near: number; far: number; zoom: number; }; gl: { antialias: false; powerPreference: string; }; frameloop: Frameloop; }' but required in type 'CanvasProps'.

"three": "0.164.1", "@react-three/fiber": "8.16.6", "react": "18.0.0", "react-dom": "18.0.0",

"@types/react": "18.0.18", "@types/react-dom": "18.0.6", "@types/three": "0.164.0",

How to deal with that?

CodyJasonBennett commented 6 months ago

I need to see a reproduction or relevant TypeScript configuration to know where to place this issue.

Related: #3256 #3258.

jdpnielsen commented 6 months ago

I can replicate this on v8.16.6 in my nextjs project with the following tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ES2017",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ],
    "strictNullChecks": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "postcss.config.js",
    "next.config.mjs"
  ],
  "exclude": [
    "node_modules"
  ]
}

Setting "jsx": "react-jsx", did not help.

Downgrading to v8.16.4 resolves the typing issue.

synchronos-t commented 5 months ago

Installing @types/react version 18.2.6 or newer seems to solve this for me.