Lavorare con React a volte può essere complicato, soprattutto quando si ha a che fare con errori non facili da capire.

“React must be in scope when using JSX” è uno degli errori più comuni. 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 JSX 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 trasformatore JSX al compile-time. 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, eliminando la necessità di 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!');
}

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

Hai mai incontrato questo fastidioso errore di React? In questo post troverai tutte le sue cause e le soluzioni per rimettere in sesto il tuo progetto. 🔧 Clicca per twittare

2 modi 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”. Assicuratevi di avere 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 normale 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, eliminando la necessità 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 propri componenti per utilizzare JSX. Se continuate a ricevere questo errore anche dopo aver controllato il file package.json per confermare la versione di React, 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: spesso si utilizzano strumenti di linting come ESLint in un progetto React perché controllano il codice per individuare potenziali errori che rischiano di romperlo ora o in futuro. 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 in React.

Esistono due modi principali 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 non riuscirete a importare React.

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 intoppo, e l’errore potrebbe essere ancora lì.

Vediamo alcuni altri modi per risolvere il problema.

Altri 3 modi per risolvere l’errore “React must be in scope when using JSX

Supponiamo che l’errore persista. Ecco altri tre modi 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 il seguente comando nel terminale:

// npm
npm install [email protected]

// yarn
yarn add [email protected]

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 persiste, aggiornate le versioni di react e react-dom utilizzando i comandi seguenti:

// npm
npm install [email protected] [email protected]

// if you use TypeScript
npm install --save-dev @types/[email protected] @types/[email protected]

// OR

// Yarn
yarn add [email protected] [email protected]

// if you use TypeScript
yarn add @types/[email protected] @types/[email protected] --dev

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

Riepilogo

L’errore “React must be in scope when using JSX” è un problema comune che gli sviluppatori possono incontrare quando lavorano con React. Questo errore si verifica soprattutto nelle versioni precedenti a React v17 quando viene utilizzata la sintassi JSX in un file, ma la libreria React non viene importata o inclusa correttamente. Si verifica anche nelle versioni superiori a React v17 quando le configurazioni ESLint lanciano l’errore o quando alcune dipendenze nella cartella node_modulessono installate in modo errato.

In base alla versione di React con cui state lavorando, ci saranno diversi modi per risolvere questo errore, tutti illustrati nell’articolo.

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