Trabajar con React a veces puede ser complicado, sobre todo cuando se trata de errores que no siempre son fáciles de entender.

Un error común que pueden encontrar los desarrolladores es el error «React debe estar dentro del alcance cuando se utiliza JSX». Este error se produce cuando React no se importa o inicializa correctamente en un componente que utiliza la sintaxis JSX.

En este artículo, analizaremos las causas de este error y proporcionaremos sugerencias para solucionarlo.

¿Qué Causa el Error «debe estar dentro del alcance cuando se utiliza JSX»?

JSX (JavaScript XML) es una extensión sintáctica que te permite escribir código similar a HTML en JavaScript. Los navegadores no entienden JSX, pero los conjuntos de herramientas preconfigurados como Create React App incluyen una herramienta de transformación JSX integrada que convierte el código JSX en código JavaScript válido, que puede ser interpretado por los navegadores.

En las versiones de React anteriores a la 17.0, el transformador JSX transformaba el código JSX en llamadas a funciones React.createElement() en tiempo de compilación. Esto requería importar React para que los elementos React funcionaran. Con la introducción de un nuevo transformador JSX en React v17.0, las funciones especiales de los nuevos puntos de entrada del paquete React se importan automáticamente, eliminando la necesidad de importar React en cada archivo que utilice JSX explícitamente.

Como ejemplo, veamos el siguiente componente funcional:

function App() {
  return <h1>Welcome to Kinsta!</h1>;
}

En tiempo de compilación, se transforma en JavaScript normal:

function App() {
  return React.createElement('h1', null, 'Welcome to Kinsta!');
}

Como React no está definido, siempre se producirá el error «‘debe estar dentro del alcance cuando se utiliza JSX»

[ ble-quote tweet=»¿Alguna vez te has enfrentado a este molesto error de React? Este post tiene todas las causas y soluciones para que tu proyecto vuelva a estar en marcha. 🔧 » user=»kinsta_es» hashtags=»React,WebDev»]

2 Formas de Solucionar el Error «react debe estar dentro del alcance cuando se utiliza jsx»

Este error puede solucionarse de varias formas dependiendo de la versión de React que estés utilizando.

  • Antes de React v17
  • React v17 y superiores

1. Incluir o Corregir la Declaración de Importación de React (Corrección para Versiones Anteriores a React v17a)

Si utilizas una versión anterior de React, puede que te falte o tengas una declaración import incorrecta para ‘react’. Asegúrate de que tienes la declaración de importación correcta en la parte superior de tu archivo (con «R» mayúscula en «React»):

// Wrong ❌
import react  from 'react';

// Correct ✅
import React  from 'react';

Tu componente funcional tendrá ahora este aspecto cuando se transforme en JavaScript normal:

import React  from 'react';

function App() {
  return React.createElement('h1', null, 'Welcome to Kinsta!');
}

2. Actualiza la Configuración de ESLint (Corrección para React v17 y Posteriores)

En React v17.0, se introdujo una nueva transformación JSX, que importa automáticamente funciones especiales de los nuevos puntos de entrada del paquete React, eliminando la necesidad de importar React en cada archivo que utilice JSX explícitamente.

Por ejemplo, toma el siguiente componente funcional:

function App() {
  return <h1>Welcome to Kinsta!</h1>;
}

Esto es a lo que lo compila la nueva transformación JSX:

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Welcome to Kinsta!' });
}

Esto significa que ya no necesitas importar React en tus componentes para utilizar JSX. Si sigues obteniendo este error incluso después de comprobar tu archivo package.json para confirmar tu versión de React, tienes que actualizar tus configuraciones de ESLint.

En este punto, técnicamente ya no se trata de un error de React, sino de un error de ESLint.

Nota: A menudo utilizas herramientas de linting como ESLint en tu proyecto React porque comprueba tu código para detectar posibles errores que pueden romper tu código ahora o en el futuro. Esta herramienta te obliga a importar React cuando detecta cualquier JSX alrededor del archivo.

Cuando estés seguro de que tu versión de React es v17.0 o superior, puedes desactivar las reglas que aseguran que importas React cuando usas JSX en tu React.

Hay dos formas principales de actualizar las configuraciones de ESLint. Si tienes un archivo .eslintrc.js o .eslintrc.json. Añade las siguientes reglas a tu archivo .eslintrc.js.

"rules": {
  // ...
  "react/react-in-jsx-scope": "off",
  "react/jsx-uses-react": "off",
 }

Si no, puedes actualizar el objeto eslintConfig en tu archivo package.json:

{
  "name": "quotes-circle",
  // ...
  "dependencies": {
    // ...
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "react/jsx-uses-react": "off",
      "react/react-in-jsx-scope": "off"
    }
  },
}

En el código anterior, la regla react-in-jsx-scope está desactivada, por lo que ESLint no lanzará errores cuando no importes React.

Llegados a este punto, deberías haber solucionado de una vez por todas el error «react debe estar dentro del alcance cuando se utiliza JSX». Pero podría darse el caso de que haya algo que se haya interpuesto en tu camino y el error siga ahí.

Echemos un vistazo a algunas formas más para que intentes solucionarlo.

Otras 3 Formas de Solucionar el error «debe estar dentro del alcance cuando se utiliza jsx»

Supongamos que el error persiste. Aquí tienes tres formas adicionales de solucionar el error «react debe estar dentro del alcance cuando se utiliza jsx».

1. Actualiza la Versión de los Scripts de React

Puedes actualizar la versión de los react-scripts de tu proyecto ejecutando el siguiente comando en tu terminal:

// npm
npm install react-scripts@latest

// yarn
yarn add react-scripts@latest

2. Elimina la Carpeta Node_modules y el Archivo package-lock.json

Si el error persiste, es posible que alguna de tus dependencias esté mal instalada. Puedes solucionarlo borrando la carpeta node_modules y el archivo package-lock.json (no package.json). A continuación, ejecuta el siguiente comando para instalar de nuevo los paquetes:

npm install

A continuación, reinicia tu servidor de desarrollo.

3. Actualiza las Versiones de React y React-Dom

Por último, si el error persiste, actualiza tus versiones de react y react-dom utilizando los siguientes comandos:

// npm
npm install react@latest react-dom@latest

// if you use TypeScript
npm install --save-dev @types/react@latest @types/react-dom@latest

// OR

// Yarn
yarn add react@latest react-dom@latest

// if you use TypeScript
yarn add @types/react@latest @types/react-dom@latest --dev

En este punto, es seguro que este error se solucionará.

Resumen

El error «React debe estar dentro del alcance cuando se utiliza JSX» es un problema común que los desarrolladores pueden encontrar cuando trabajan con React. Este error se produce principalmente en versiones anteriores de React v17 cuando se utiliza la sintaxis JSX en un archivo, pero la biblioteca React no se importa o incluye correctamente. También se produce en versiones superiores de React v17 cuando las configuraciones de ESLint lanzan el error o cuando algunas dependencias de tu carpeta node_modules están mal instaladas.

En función de la versión de React con la que estés trabajando, habrá diferentes formas de solucionar este error que te indicamos en el artículo.

Ahora te toca a ti: ¿Te has encontrado alguna vez con este problema? ¿Cómo lo solucionaste? ¿Hay algún otro método que hayas utilizado y que no se haya mencionado en este artículo? ¡Háznoslo saber en los comentarios!