Error de compilación de tags HTML básicos en JSX

 En el IDE, en cada tag HTML que está dentro de un fragmento JSX, tengo el siguiente error: El elemento JSX tiene el tipo "any" implícitamente porque no existe ninguna interfaz "JSX.IntrinsicElements".ts(7026)

Entiendo perfectamente. Este error (TS7026) es muy común al configurar TypeScript en un proyecto React (o Next.js) y se relaciona directamente con cómo el compilador de TypeScript reconoce los elementos HTML estándar como <div> o <span>.

🚨 La Causa del Error

El error significa que TypeScript no puede encontrar las definiciones de tipo para los elementos nativos de HTML que usas en tu JSX (lo que TypeScript llama JSX.IntrinsicElements).

En términos simples: TypeScript sabe lo que es const x: string = "hello", pero no sabe qué propiedades acepta un <div className="x"> ni qué tipo de objeto representa en tiempo de compilación.

---

Soluciones al Error "JSX.IntrinsicElements"

Hay dos pasos esenciales para resolver esto.

1. Instalar las Definiciones de Tipo de React

Aunque ya tengas React instalado, TypeScript necesita un paquete separado que contenga solo las definiciones de tipos para que el compilador entienda el contexto de React y JSX.

Asegúrate de ejecutar lo siguiente en tu terminal (si usas NPM o Yarn):

Bash

npm install @types/react @types/react-dom --save-dev
# O con Yarn:
# yarn add @types/react @types/react-dom --dev

2. Configurar el tsconfig.json

Este es el paso más crucial. Debes indicarle al compilador de TypeScript cómo tratar los archivos .jsx o .tsx y qué sintaxis de módulo usar.

Necesitas establecer al menos dos campos clave:

1. "jsx": Debe estar configurado a "react-jsx" (para React 17+) o "react"/"preserve" (para versiones anteriores o configuraciones específicas). "react-jsx" es el estándar moderno.

2. "moduleResolution": Debe estar en "node" o "nodeNext" para ayudar a resolver las dependencias instaladas en node_modules.

A continuación, te dejo un archivo tsconfig.json de ejemplo con las configuraciones recomendadas para un proyecto React moderno:

Una vez que instales los tipos (@types/react) y te asegures de que tu tsconfig.json tiene al menos la línea "jsx": "react-jsx", el error debería desaparecer porque TypeScript ahora sabe qué interfaz utilizar para validar tus elementos JSX.

¿Estás trabajando en un proyecto de React puro o estás utilizando un framework como Next.js o Vite? La respuesta a eso podría afinar aún más la configuración si fuera necesario.

---

Estoy utilizando Vite.

Eso es genial. Como estás usando Vite, el proceso de configuración es típicamente más simple y rápido que con herramientas más antiguas.

El error de JSX.IntrinsicElements en un proyecto de Vite con React y TypeScript generalmente se debe a una configuración incorrecta en el archivo que le dice a TypeScript cómo manejar React, que en Vite es el tsconfig.json o tsconfig.node.json.

---

Solución Específica para Proyectos Vite + React (TypeScript)

Vite utiliza un estándar moderno de TypeScript, lo que significa que la configuración del tsconfig.json es crucial.

1. Verifica las Dependencias (@types/react)

Aunque ya estés usando React, la causa principal del error es la falta del paquete de definición de tipos. Si aún no lo has hecho, asegúrate de instalar las definiciones de tipo de React, que le dicen a TypeScript qué son los elementos JSX:

Bash

npm install @types/react @types/react-dom --save-dev
# o
yarn add @types/react @types/react-dom --dev

2. Ajusta el Archivo tsconfig.json

Vite y React modernos (usando la transformación react-jsx) manejan la importación de React automáticamente, pero el compilador de TypeScript necesita saberlo.

Asegúrate de que el archivo tsconfig.json (o el archivo de configuración raíz si tienes varios) incluya estos ajustes dentro de compilerOptions:

{

"compilerOptions": {

"target": "ES2020",

"useDefineForClassFields": true,

"lib": ["ES2020", "DOM", "DOM.Iterable"],

"module": "ESNext",

"skipLibCheck": true,

/* Configuraciones Cruciales para JSX */

"jsx": "react-jsx", // Indica a TypeScript que use el nuevo transformador de React

"moduleResolution": "bundler", // Recomendado para Vite/ESM

"allowImportingTsExtensions": true,

"resolveJsonModule": true,

"isolatedModules": true,

"noEmit": true,

/* Estrictez */

"strict": true,

"noUnusedLocals": true,

"noUnusedParameters": true,

"noFallthroughCasesInSwitch": true

},

"include": ["src"],

"references": [{ "path": "./tsconfig.node.json" }]

}

3. Reinicia el Servidor de Desarrollo

Después de instalar las dependencias y modificar el tsconfig.json, es fundamental detener el servidor de desarrollo de Vite y volver a iniciarlo (npm run dev o yarn dev). El compilador de TypeScript a menudo necesita un reinicio completo para reconocer los nuevos archivos de definición de tipos.

Con estos pasos, TypeScript debería reconocer las interfaces de los elementos intrínsecos de JSX (como <div>, <span>, etc.), eliminando el error TS7026.