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

[haola1210]

I followed your introduction page but got the error: Property 'mesh' does not exist on type 'JSX.IntrinsicElements'.
my dependencies

"@react-three/fiber": "^8.9.1"
"three": "^0.148.0"
"@types/three": "^0.146.0"

I tried to downgrade the version of three and types/three but it still did not work
my code:

pls help me to fix this issue. thanks

[CodyJasonBennett]

Did you import from @react-three/fiber? TS has no way of inferring where to source JSX.IntrinsicElements without any use of that package. Otherwise, you could be missing a JSX transform, and need to import React from 'react'.

[VrTech]

Same here. Not sure how this is happening. How to properly set up/fix would be appreciated.
It probably be something related to tsconfig.json

[CodyJasonBennett]

Make sure that you're importing @react-three/fiber somewhere in your project, and if you don't have automatic JSX transform, have the React namespace imported in the file.

Show Example

// https://docs.pmnd.rs/react-three-fiber/getting-started/introduction#what-does-it-look-like?
import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame, ThreeElements } from '@react-three/fiber'

function Box(props: ThreeElements['mesh']) {
  const mesh = useRef<THREE.Mesh>(null!)
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)
  useFrame((state, delta) => (mesh.current.rotation.x += delta))
  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active ? 1.5 : 1}
      onClick={(event) => setActive(!active)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

createRoot(document.getElementById('root')).render(
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>,
)

If you need any further help, create a discussion or ask in https://discord.gg/poimandres.

[vitordeap]

Well, I had the same issue and after a while I noticed that I had named my npm project three and of course if conflicted with the three.js dependency 🤦‍♂️. After changing the name the issue was fixed.

Decided to share as it could help someone

[nikhila29]

> ```tsx
> ThreeElements 
> ```

Iam also getting same error

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;
 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} />;
    
    please help me in this

[Lermatroid]

If anyone else is running into this recently and found this issue on google, and is on Next 15 / React 19 check these out:

Duplicate of #3385
Suggested Fix: #3385 (comment)