Werken met React kan soms lastig zijn, vooral bij het dealen met fouten die niet altijd gemakkelijk te begrijpen zijn.

Een veel voorkomende fout die developers kunnen tegenkomen is de “React must be in scope when using JSX” fout. Deze fout treedt op wanneer React niet goed geïmporteerd of geïnitialiseerd wordt in een component dat JSX syntax gebruikt.

In dit artikel bespreken we de oorzaken van deze fout en geven we oplossingen voor het oplossen ervan.

Wat veroorzaakt de “React must be in scope when using JSX” fout?

JSX (JavaScript XML) is een syntax-extensie waarmee je HTML-achtige code kunt schrijven in JavaScript. Browsers begrijpen JSX niet, maar voorgeconfigureerde toolkits zoals Create React App bevatten een JSX transformtool die de JSX code omzet in geldige JavaScript code, die geïnterpreteerd kan worden door browsers.

In React versies van vóór 17.0 werd JSX door de JSX transformer tijdens compileertijd omgezet in React.createElement() functiecalls. Hierdoor moest React geïmporteerd worden om de React elementen te laten werken. Met de introductie van een nieuwe JSX transformer in React v17.0 worden speciale functies uit de nieuwe invoerpunten van het React pakket automatisch geïmporteerd, waardoor het niet meer nodig is React te importeren in elk bestand dat JSX expliciet gebruikt.

Laten we als voorbeeld eens kijken naar de volgende functionele component:

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

Bij het compileren wordt het omgezet in gewone JavaScript:

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

Omdat React ongedefinieerd is, gooit dit altijd de fout “‘React must be in scope when using JSX”.

2 manieren om de “React must be in scope when using JSX” fout op te lossen

Deze fout kan op een paar manieren opgelost worden, afhankelijk van de versie van React die je gebruikt.

  • Vóór React v17
  • React v17 en hoger

1. React import declaration opnemen of corrigeren (fix voor React lager dan v17)

Als je een oudere versie van React gebruikt, kan het zijn dat je een onjuiste import declaration voor ‘react’ mist of hebt. Zorg voor de juiste import declaration bovenaan je bestand (met een hoofdletter “R” op “React”):

// Wrong ❌
import react  from 'react';

// Correct ✅
import React  from 'react';

Je functionele component zal er nu zo uitzien als hij wordt omgezet in gewone JavaScript:

import React  from 'react';

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

2. ESLint configuratie bijwerken (Fix voor React v17 en hoger)

In React v17.0 is een nieuwe JSX transformatie geïntroduceerd, die automatisch speciale functies importeert uit de nieuwe invoerpunten van het React pakket, waardoor het niet meer nodig is React te importeren in elk bestand dat JSX expliciet gebruikt.

Neem bijvoorbeeld de volgende functionele component:

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

Dit is waar de nieuwe JSX transform het naar compileert:

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

Dit betekent dat je React niet langer hoeft te importeren in je componenten om JSX te gebruiken. Als je deze fout blijft krijgen, zelfs na het controleren van je package.json bestand om je React versie te bevestigen, moet je je ESLint configuraties bijwerken.

In dit stadium is dit technisch gezien geen React fout meer, maar eerder een ESLint fout.

Opmerking: Je gebruikt vaak linting tools zoals ESLint in je React project omdat het je code controleert om mogelijke fouten op te sporen die je code nu of in de toekomst kunnen breken. Deze tool dwingt je React te importeren als het JSX rond het bestand detecteert.

Als je zeker weet dat je React versie v17.0 of hoger is, dan is het veilig om de regels uit te schakelen die ervoor zorgen dat je React importeert als je JSX gebruikt in je React.

Er zijn twee belangrijke manieren om ESLint configuraties bij te werken. Als je een .eslintrc.js of .eslintrc.json bestand hebt. Voeg de volgende regels toe aan je .eslintrc.js bestand.

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

Anders kun je het eslintConfig object in je package.json bestand bijwerken:

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

In bovenstaande code is de regel react-in-jsx-scope uitgeschakeld, zodat ESLint geen fouten geeft als je React niet importeert.

Op dit punt zou je de “React’ must be in scope when using JSX” fout voor eens en altijd opgelost moeten hebben. Maar het kan zijn dat iets je in de weg zat, en dat de fout er nog steeds is.

Laten we eens kijken naar nog een paar manieren waarop je het kunt proberen op te lossen.

3 extra manieren om de “React must be in scope when using jsx” fout op te lossen

Stel dat de fout nog steeds aanhoudt. Hier zijn drie extra manieren om de “React’ must be in scope when using JSX” fout op te lossen.

1. Werk de versie van React scripts bij

Je kunt de versie van de react-scripts van je project bijwerken door het volgende commando in je terminal uit te voeren:

// npm
npm install react-scripts@latest

// yarn
yarn add react-scripts@latest

2. Verwijder de map Node_modules en het bestand package-lock.json

Als de fout blijft bestaan, dan is het mogelijk dat sommige van je dependencies verkeerd geïnstalleerd zijn. Je kunt dit oplossen door je node_modules map en package-lock.json bestand (niet package.json) te verwijderen. Voer dan het volgende commando uit om de pakketten opnieuw te installeren:

npm install

Start vervolgens je dev-server opnieuw op.

3. Werk de versies van React en React-Dom bij

Tot slot, als de fout blijft bestaan, werk dan je versies van react en react-dom bij met onderstaande commando’s:

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

Op dit punt is het (vrijwel) zeker dat deze fout is opgelost.

Samenvatting

De fout “React must be in scope when using JSX” is een veelvoorkomend probleem dat developers kunnen tegenkomen bij het werken met React. Deze fout treedt vooral op in eerdere versies van React v17 wanneer de JSX syntaxis wordt gebruikt in een bestand, maar de React bibliotheek niet goed geïmporteerd of opgenomen is. Het komt ook voor in hogere versies van React v17 wanneer ESLint configuraties de fout geven of wanneer sommige dependencies in je node_modules map verkeerd zijn geïnstalleerd.

Op basis van de React versie waarmee je werkt, zullen er verschillende manieren zijn die je kunt gebruiken om deze fout op te lossen, die we in het artikel hebben geschetst.

Nu is het jouw beurt: Ben je dit probleem ooit tegengekomen? Hoe heb je het opgelost? Zijn er andere benaderingen die je hebt gebruikt die niet in dit artikel zijn behandeld? Laat het ons weten in de comments!