Property ‘div’ does not exist on type ‘jsx.intrinsicelements’

by

When you receive the error message “property ‘div’ does not exist on type ‘jsx.intrinsicelements'”, it means that the TypeScript compiler does not recognize the ‘div’ tag as a valid HTML element within the JSX syntax.

To resolve this issue, you need to make sure you have the correct TypeScript configuration and import the necessary types.

Example:

Assuming you are using React with TypeScript, here is how you can properly use the ‘div’ tag in JSX:

// Import necessary types
import React, { ReactElement } from 'react';

// Define a component
const MyComponent = (): ReactElement => {
  return (
    

      
This is a div element.

    

  );
};

export default MyComponent;

In the example above, we import the ‘React’ and ‘ReactElement’ types from the ‘react’ package. Then, we define a functional component called ‘MyComponent’ using an arrow function. Inside the component, we can use the ‘div’ tag without any issues.

Make sure you have the necessary dependencies installed, including ‘react’ and ‘react-dom’, and that your TypeScript configuration (typically ‘tsconfig.json’) includes the following:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

By specifying “jsx”: “react-jsx” in the compiler options, TypeScript will recognize the JSX syntax and provide proper type checking.

Leave a comment