Property 'primitive' does not exist on type 'JSX.IntrinsicElements'.

[nikhila29]

👋 hi there, for issues that aren't that pressing, that could be related to threejs etc, please consider [github discussions](https://github.com/pmndrs/react-three-fiber/discussions).


 Property 'primitive' does not exist on type 'JSX.IntrinsicElements'.
    42 |        // const gltf = useLoader(GLTFLoader, PremiumVilla)
    43 |        const gltf = useLoader(GLTFLoader, PremiumVilla)['nodes'];
  > 44 |                return <primitive object={gltf.scene} />
       |                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    45 |        // return null;
    46 |
    47 |        // return <primitive object={scene} />;
    
    I am getting above error in below code
    
    
    import React, { Suspense, useRef } from "react";
import { Link } from "react-router";
import { images } from "../../../assets";
import { homeConstants } from "../constants";
import "../styles.scss";
import { Canvas, useLoader, useFrame, ThreeElements } from '@react-three/fiber';
import PremiumVilla from '../../../assets/models/PremiumVilla.glb';
import { OrbitControls, useGLTF } from "@react-three/drei";
import * as THREE from 'three';

// import { GLTFLoader } from '../../../../node_modules/three/examples/jsm/loaders/GLTFLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'


// interface BoxProps extends ThreeElements['mesh'] {
// 	color?: string;
//   }
  
//   function Box(props: BoxProps) {
// 	const mesh = useRef<THREE.Mesh>(null!);
  
// 	useFrame((state, delta) => (mesh.current.rotation.x += delta));
  
// 	return (
// 	  <mesh {...props} ref={mesh}>
// 		<boxGeometry args={[1, 1, 1]} />
// 		<meshStandardMaterial color={props.color || 'hotpink'} />
// 	  </mesh>
// 	);
//   }




function Model() {
	const { scene } = useGLTF(PremiumVilla) as { scene: THREE.Group };

	console.log("model---------", )

	// Apply scaling to the model for better visibility
	scene.scale.set(0.1, 0.1, 0.1);
	// const gltf = useLoader(GLTFLoader, PremiumVilla)
	const gltf = useLoader(GLTFLoader, PremiumVilla)['nodes'];
		return <primitive object={gltf.scene} />
	// return null;

	// return <primitive object={scene} />;
}

// function Model({ url }: { url: string }) {
// 	// Load the GLTF model using the GLTFLoader
// 	const gltf = useLoader(GLTFLoader, url);
  
// 	// Scale the model for visibility
// 	const scene = gltf.scene;
// 	scene.scale.set(0.1, 0.1, 0.1); // Adjust this scale as necessary
  
// 	return <primitive object={scene} />;
//   }

// function Box() {
// 	const ref = useRef(null)
// 	useFrame(() => (ref.current.rotation.x += 0.01))
// 	return (
// 	  <mesh ref={ref}>
// 		<boxBufferGeometry args={[1, 1, 1]} />
// 		<meshStandardMaterial color={'orange'} />
// 	  </mesh>
// 	)
//   }



const AboutUs: React.FC<{ data: any }> = ({ data }) => {

	// Ensure `data` is not null and is an array before accessing `data[0]`
	const aboutUsData = Array.isArray(data) && data?.length > 0 ? data[0] : null;

	// console.log("about data: ", aboutUsData?.image);


	return (
		<div className="about_us_bg">
			<div className="about_us_container">
				<h1 className="about_us_main_heading header-first">{homeConstants.aboutUs}</h1>
				<p className="about_us_main_para para-third">{homeConstants.aboutUsText}</p>
				<h3 className="about_us_sub_heading sub-header">
					{homeConstants.realEstateTourText}
				</h3>
				{homeConstants.realEstateTourOptions.map((item, index) => (
					<div key={index} className="about_us_option_container">
						<div className="about_us_text_container">
							<p className="about_option_para para-third">
								<span className="about_option_para_span">{item.subHead}</span>{" "}
								{item.label}
							</p>
						</div>
					</div>
				))}
				<div>
					<Link
						to={`/about`}
						className="clickcustomform btn btn--header btn--animated learnmore_text"
					>
						Learn More
						{/* <div
						className="about-right-arrow" // Add the pulsate-css class here
						style={{
							position: "relative",
							top: 1,
							left: 10,
							width: 30
						}}
						>
							<FaArrowAltCircleRight size={20}/>
						</div> */}
					</Link>
				</div>
			</div>
			{/* <div className="about-img">
				<img alt="home-about" className="img-bg" src={aboutUsData?.image || images.aboutUsBgmobile} loading="lazy"/>
			</div> */}
			{/* Canvas to display the 3D model */}
			<div className="about-img">
				{/* <Canvas camera={{ position: [5, 5, 10], fov: 40 }}>
					{/* <ambientLight intensity={0.5} />
					<directionalLight position={[10, 10, 5]} intensity={1} />
					<OrbitControls enableDamping={true} /> */}
					{/* <Model />
				</Canvas> */} 
				<Canvas>
					{/* <Suspense fallback={<div>Loading...</div>}> */}
						<Model/>
						{/* <Box color="blue" /> */}
					{/* </Suspense> */}
				</Canvas>

			</div>
		</div>
	);
};

export default AboutUs;


Unable to find, Please help me in this code
Why it is occuring


tsconfig.json
{
  "compilerOptions": {
    "target": "ES6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": [
      "react",
      "react-dom",
      "node",
      "@react-three/fiber" // Add this to include fiber types
    ]
  },
  "include": [
    "src/**/*",
    "src/types/**/*" // Ensure it looks into your custom type definitions
  ],
  "exclude": [
    "node_modules"
  ]
}


    
    
    

[CodyJasonBennett]

react-three-fiber v8 does not support React 19. We have a v9 release candidate which does we're tracking in #2331.