A volte può essere complicato lavorare con React, soprattutto quando si ha a che fare con errori difficili da capire.

“React must be in scope when using JSX” è uno degli errori più frequenti. Questo errore si verifica quando React non viene importato o inizializzato correttamente in un componente che utilizza la sintassi JSX.

In questo articolo analizzeremo le cause di questo errore e forniremo le soluzioni per risolverlo.

Quali sono le cause dell’errore “React Must Be in Scope When Using JSX”?

JSX (JavaScript XML) è un’estensione della sintassi che consente di scrivere codice simile all’HTML in JavaScript. I browser non comprendono JSX, ma i toolkit pre-configurati come Create React App includono uno strumento di trasformazione che converte il codice JSX in codice JavaScript valido, interpretabile dai browser.

Nelle versioni di React precedenti alla 17.0, JSX veniva trasformato in chiamate di funzione React.createElement() dal JSX transformer durante la compilazione. Questo richiedeva l’importazione di React per far funzionare gli elementi React. Con l’introduzione di un nuovo JSX transform in React v17.0, le funzioni speciali dei nuovi punti di ingresso del pacchetto React vengono importate automaticamente, e non è più necessario importare React in ogni file che utilizza esplicitamente JSX.

A titolo di esempio, diamo un’occhiata al seguente componente funzionale:

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

Al momento della compilazione, viene trasformato in normale JavaScript:

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

Dato che React non è definito, verrà sempre lanciato l’errore “React must be in scope when using JSX”.

2 metodi per risolvere l’errore “React must be in scope when using JSX”

Questo errore può essere risolto in diversi modi, a seconda della versione di React in uso.

  • Precedenti a React v17
  • React v17 e superiori

1. Includere o correggere la dichiarazione di importazione di React (correzione per React v17)

Se si utilizza una versione precedente di React, è possibile che manchi o sia presente una dichiarazione di importazione errata per “react”. Controllate di avere inserito la dichiarazione di importazione corretta all’inizio del file (con la “R” maiuscola in “React”):

// Wrong ❌
import react  from 'react';

// Correct ✅
import React  from 'react';

Il componente funzionale avrà ora questo aspetto quando sarà trasformato in JavaScript:

import React  from 'react';

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

2. Aggiornare la configurazione di ESLint (correzione per React v17 e versioni successive)

In React v17.0 è stato introdotto un nuovo JSX transform che importa automaticamente le funzioni speciali dai nuovi punti di ingresso del pacchetto React. Questo permette di evitare di importare React in ogni file che utilizza esplicitamente JSX.

Ad esempio, prendiamo il seguente componente funzionale:

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

Ecco come viene compilato dal nuovo JSX transform:

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

Ciò significa che non è più necessario importare React nei componenti per utilizzare JSX. Se continuate a ricevere questo errore anche dopo aver controllato la versione di React nel file package.json, dovete aggiornare le configurazioni di ESLint.

A questo punto, tecnicamente non si tratta più di un errore di React ma di un errore di ESLint.

Nota: in un progetto React spesso si utilizzano strumenti di linting come ESLint perché controllano il codice per individuare eventuali errori. Questo strumento obbliga a importare React quando rileva la presenza di JSX nel file.

Quando sarete sicuri che la vostra versione di React è la v17.0 o superiore, allora potrete disattivare le regole che vi assicurano di importare React quando usate JSX.

Esistono essenzialmente due modi per aggiornare le configurazioni di ESLint. Se avete un file .eslintrc.js o .eslintrc.json, aggiungete le seguenti regole al file .eslintrc.js.

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

In alternativa, potete aggiornare l’oggetto eslintConfig nel file 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"
    }
  },
}

Nel codice qui sopra, la regola react-in-jsx-scope è disattivata, quindi ESLint non lancerà errori quando React non viene importato.

A questo punto dovreste aver risolto una volta per tutte l’errore “React must be in scope when using JSX”. Ma potrebbe esserci stato qualche altro intoppo e l’errore potrebbe essere ancora lì.

Vediamo alcune altre soluzioni al problema.

Altre 3 soluzioni per risolvere l’errore “React must be in scope when using JSX

Supponiamo che l’errore persista. Ecco altri tre metodi per risolvere l’errore “React must be in scope when using JSX”.

1. Aggiornare la versione degli script di React

Potete aggiornare la versione degli script di React del progetto eseguendo questo comando nel terminale:

// npm
npm install react-scripts@latest

// yarn
yarn add react-scripts@latest

2. Eliminare la cartella Node_modules e il file package-lock.json

Se l’errore persiste, è possibile che alcune dipendenze siano state installate in modo errato. È possibile risolvere il problema cancellando la cartella node_modules e il file package-lock.json (non package.json). Quindi eseguite il seguente comando per installare nuovamente i pacchetti:

npm install

A questo punto, riavviate il server dev.

3. Aggiornare le versioni di React e React-Dom

Infine, se l’errore è ancora lì, aggiornate le versioni di react e react-dom utilizzando i comandi seguenti:

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

Arrivati a questo punto, l’errore sarà sicuramente stato risolto.

Riepilogo

Gli sviluppatori possono imbattersi spesso nell’errore “React must be in scope when using JSX” quando lavorano con React. Si verifica soprattutto nelle versioni precedenti a React v17 quando viene utilizzata la sintassi JSX, ma la libreria React non è stata importata o inclusa correttamente. Si verifica anche nelle versioni superiori a React v17 quando le configurazioni di ESLint lanciano l’errore o quando alcune dipendenze presenti nella cartella node_modules sono installate in modo errato.

In base alla versione di React con cui state lavorando, avrete a disposizione diverse soluzioni per risolvere questo errore, tutte illustrate nell’articolo.

Ora tocca a voi: Avete mai riscontrato questo problema? Come l’avete risolto? Ci sono altri approcci che avete seguito e che non sono stati trattati in questo articolo? Fatecelo sapere nei commenti!