Travailler avec React peut parfois s’avérer délicat, notamment lorsqu’il s’agit de gérer des erreurs qui ne sont pas toujours faciles à comprendre.

Une erreur courante que les développeurs peuvent rencontrer est l’erreur « React must be in scope when using JSX ». Cette erreur se produit lorsque React n’est pas correctement importé ou initialisé dans un composant qui utilise la syntaxe JSX.

Dans cet article, nous allons examiner les causes de cette erreur et fournir des solutions pour la corriger.

Quelles sont les causes de l’erreur « React must be in scope when using jsx » ?

JSX (JavaScript XML) est une extension syntaxique qui vous permet d’écrire du code de type HTML en JavaScript. Les navigateurs ne comprennent pas JSX, mais les boîtes à outils pré-configurées comme Create React App incluent un outil de transformation JSX sous le capot qui convertit le code JSX en code JavaScript valide, qui peut être interprété par les navigateurs.

Dans les versions de React antérieures à la 17.0, JSX était transformé en appels de fonction React.createElement() par le transformateur JSX au moment de la compilation. Cela nécessitait d’importer React pour que les éléments React fonctionnent. Avec l’introduction d’un nouveau transformateur JSX dans React v17.0, les fonctions spéciales des nouveaux points d’entrée du paquet React sont automatiquement importées, ce qui élimine la nécessité d’importer React dans chaque fichier qui utilise explicitement JSX.

À titre d’exemple, examinons le composant fonctionnel suivant :

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

Au moment de la compilation, il est transformé en JavaScript normal :

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

React n’étant pas défini, l’erreur « ‘React’ must be in scope when using jsx. » sera toujours affichée

2 façons de corriger l’erreur « Ract must be in scope when using jsx »

Cette erreur peut être corrigée de plusieurs manières en fonction de la version de React que vous utilisez.

  • Avant React v17
  • React v17 et plus

1. Inclure ou corriger la déclaration d’importation de React (Correction pour les versions antérieures à React v17)

Si vous utilisez une ancienne version de React, il se peut que la déclaration d’importation de « react » soit manquante ou incorrecte. Assurez-vous d’avoir la déclaration d’importation correcte au début de votre fichier (avec un « R » majuscule sur « React ») :

// Wrong ❌
import react  from 'react';

// Correct ✅
import React  from 'react';

Votre composant fonctionnel ressemblera désormais à ceci lorsqu’il sera transformé en JavaScript normal :

import React  from 'react';

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

2. Mettre à jour la configuration ESLint (Correction pour React v17 et plus)

Dans React v17.0, une nouvelle transformation JSX a été introduite, qui importe automatiquement des fonctions spéciales à partir des nouveaux points d’entrée du paquet React, ce qui supprime la nécessité d’importer React dans chaque fichier qui utilise explicitement JSX.

Par exemple, prenez le composant fonctionnel suivant :

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

Voici en quoi la nouvelle transformation JSX le compile :

// 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!' });
}

Cela signifie que vous n’avez plus besoin d’importer React dans vos composants pour utiliser JSX. Si vous continuez à obtenir cette erreur même après avoir vérifié votre fichier package.json pour confirmer votre version de React, vous devez mettre à jour vos configurations ESLint.

À ce stade, il ne s’agit techniquement plus d’une erreur React mais plutôt d’une erreur ESLint.

Note : Vous utilisez souvent des outils de linting comme ESLint dans votre projet React parce qu’il vérifie votre code pour détecter les erreurs potentielles qui peuvent casser votre code maintenant ou dans le futur. Cet outil vous oblige à importer React lorsqu’il détecte du JSX dans le fichier.

Lorsque vous êtes sûr que votre version de React est v17.0 ou supérieure, vous pouvez désactiver les règles qui vous obligent à importer React lorsque vous utilisez JSX dans votre React.

Il y a deux façons principales de mettre à jour les configurations ESLint. Si vous avez un fichier .eslintrc.js ou .eslintrc.json. Ajoutez les règles suivantes à votre fichier .eslintrc.j s.

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

Sinon, vous pouvez mettre à jour l’objet eslintConfig dans votre fichier 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"
    }
  },
}

Dans le code ci-dessus, la règle react-in-jsx-scope est désactivée, de sorte qu’ESLint ne génère pas d’erreur lorsque vous n’importez pas React.

À ce stade, vous devriez avoir corrigé l’erreur « react’ must be in scope when using jsx » une fois pour toutes. Mais il se peut que quelque chose se soit mis en travers de votre chemin et que l’erreur soit toujours présente.

Jetons un coup d’œil à quelques autres façons d’essayer de la corriger.

3 autres façons de corriger l’erreur « React must be in scope when using jsx »

Supposons que l’erreur persiste. Voici trois autres façons de corriger l’erreur « React’ must be in scope when using jsx ».

1. Mettre à jour la version des scripts React

Vous pouvez mettre à jour la version des scripts react de votre projet en exécutant la commande suivante dans votre terminal :

// npm
npm install react-scripts@latest

// yarn
yarn add react-scripts@latest

2. Supprimer le dossier Node_modules et le fichier package-lock.json

Si l’erreur persiste, il est possible que certaines de vos dépendances soient mal installées. Vous pouvez y remédier en supprimant votre dossier node_modules et le fichier package-lock.json (et non package.json). Exécutez ensuite la commande suivante pour réinstaller les paquets :

npm install

Redémarrez ensuite votre serveur de développement.

3. Mettre à jour les versions de React et React-Dom

Enfin, si l’erreur persiste, mettez à jour vos versions de react et react-dom en utilisant les commandes ci-dessous :

// 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

À ce stade, il est certain que cette erreur sera corrigée.

Résumé

L’erreur « React must be in scope when using JSX » est un problème courant que les développeurs peuvent rencontrer lorsqu’ils travaillent avec React. Cette erreur se produit principalement dans les versions antérieures de React v17 lorsque la syntaxe JSX est utilisée dans un fichier, mais que la bibliothèque React n’est pas correctement importée ou incluse. Elle se produit également dans les versions supérieures de React v17 lorsque les configurations ESLint lancent l’erreur ou lorsque certaines dépendances dans votre dossier node_modules sont mal installées.

En fonction de la version de React avec laquelle vous travaillez, il y aura différentes façons de corriger cette erreur que nous avons décrites dans l’article.

À vous de jouer : Avez-vous déjà rencontré ce problème ? Comment l’avez-vous résolu ? Avez-vous utilisé d’autres méthodes qui ne sont pas abordées dans cet article ? Faites-nous en part dans les commentaires !