Die Arbeit mit React kann manchmal knifflig sein, besonders wenn es um Fehler geht, die nicht immer leicht zu verstehen sind.

Ein häufiger Fehler, auf den Entwickler/innen stoßen können, ist der Fehler „React must be in scope when using JSX“. Dieser Fehler tritt auf, wenn React in einer Komponente, die JSX-Syntax verwendet, nicht richtig importiert oder initialisiert wird.

In diesem Artikel gehen wir auf die Ursachen dieses Fehlers ein und zeigen Lösungen auf, wie er behoben werden kann.

Was ist die Ursache für den Fehler „react must be in scope when using jsx“?

JSX (JavaScript XML) ist eine Syntaxerweiterung, mit der du HTML-ähnlichen Code in JavaScript schreiben kannst. Browser verstehen JSX nicht, aber vorkonfigurierte Toolkits wie Create React App enthalten unter der Haube ein JSX-Transformationswerkzeug, das den JSX-Code in gültigen JavaScript-Code umwandelt, der von Browsern interpretiert werden kann.

In React-Versionen vor 17.0 wurde JSX vom JSX-Transformer zur Kompilierzeit in React.createElement() Funktionsaufrufe umgewandelt. Dies erforderte den Import von React, damit die React-Elemente funktionieren. Mit der Einführung einer neuen JSX-Transformation in React v17.0 werden spezielle Funktionen aus den neuen Einstiegspunkten des React-Pakets automatisch importiert, sodass React nicht mehr in jeder Datei, die JSX explizit verwendet, importiert werden muss.

Schauen wir uns als Beispiel die folgende funktionale Komponente an:

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

Zur Kompilierzeit wird sie in normales JavaScript umgewandelt:

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

Da React undefiniert ist, wird immer die Fehlermeldung „react‘ must be in scope when using jsx“ ausgegeben.

2 Wege zur Behebung des Fehlers „react must be in scope when using jsx“

Dieser Fehler kann auf verschiedene Arten behoben werden, je nachdem, welche Version von React du verwendest.

  • Vor React v17
  • React v17 und höher

1. React-Import-Deklaration einbinden oder korrigieren (Fix für Versionen vor React v17)

Wenn du eine ältere Version von React verwendest, kann es sein, dass du keine oder eine falsche Importanweisung für „react“ hast. Vergewissere dich, dass du die richtige Importanweisung am Anfang deiner Datei hast (mit einem großen „R“ bei „React“):

// Wrong ❌
import react  from 'react';

// Correct ✅
import React  from 'react';

Deine funktionale Komponente sieht jetzt so aus, wenn sie in normales JavaScript umgewandelt wird:

import React  from 'react';

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

2. ESLint-Konfiguration aktualisieren (Fix für React v17 und höher)

In React v17.0 wurde eine neue JSX-Transformation eingeführt, die automatisch spezielle Funktionen aus den neuen Einstiegspunkten des React-Pakets importiert. Damit entfällt die Notwendigkeit, React in jeder Datei zu importieren, die JSX explizit verwendet.

Nehmen wir zum Beispiel die folgende funktionale Komponente:

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

Die neue JSX-Transformation kompiliert sie zu diesem Ergebnis:

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

Das bedeutet, dass du React nicht mehr in deine Komponenten importieren musst, um JSX zu verwenden. Wenn du diese Fehlermeldung auch nach der Überprüfung deiner package.json-Datei erhältst, um deine React-Version zu bestätigen, musst du deine ESLint-Konfigurationen aktualisieren.

In diesem Stadium handelt es sich technisch gesehen nicht mehr um einen React-Fehler, sondern um einen ESLint-Fehler.

Hinweis: Du verwendest oft Linting-Tools wie ESLint in deinem React-Projekt, weil es deinen Code auf mögliche Fehler überprüft, die deinen Code jetzt oder in Zukunft kaputt machen können. Dieses Tool zwingt dich dazu, React zu importieren, wenn es JSX in der Datei entdeckt.

Wenn du sicher bist, dass deine React-Version v17.0 oder höher ist, kannst du die Regeln deaktivieren, die sicherstellen, dass du React importierst, wenn du JSX in deinem React verwendest.

Es gibt zwei Möglichkeiten, ESLint-Konfigurationen zu aktualisieren. Wenn du eine .eslintrc.js oder .eslintrc.json Datei hast. Füge die folgenden Regeln zu deiner .eslintrc.js Datei hinzu.

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

Andernfalls kannst du das eslintConfig Objekt in deiner package.json Datei aktualisieren:

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

Im obigen Code ist die Regel react-in-jsx-scope ausgeschaltet, so dass ESLint keine Fehler ausgibt, wenn du React nicht importierst.

Jetzt solltest du den Fehler „react‘ must be in scope when using jsx“ ein für alle Mal behoben haben. Es kann aber auch sein, dass dir etwas in die Quere gekommen ist und der Fehler immer noch auftritt.

Schauen wir uns ein paar weitere Möglichkeiten an, wie du den Fehler beheben kannst.

Weitere 3 Möglichkeiten zur Behebung des „react must be in scope when using jsx“-Fehlers

Angenommen, der Fehler tritt immer noch auf. Hier sind drei weitere Möglichkeiten, um den Fehler „react‘ must be in scope when using jsx“ zu beheben.

1. Aktualisiere die Version der React-Skripte

Du kannst die Version der React-Skripte deines Projekts aktualisieren, indem du den folgenden Befehl in deinem Terminal ausführst:

// npm
npm install react-scripts@latest

// yarn
yarn add react-scripts@latest

2. Lösche den Node_modules-Ordner und die Datei package-lock.json

Wenn der Fehler weiterhin besteht, ist es möglich, dass einige deiner Abhängigkeiten falsch installiert sind. Du kannst dies beheben, indem du den Ordner node_modules und die Datei package-lock.json (nicht package.json) löschst. Führe dann den folgenden Befehl aus, um die Pakete neu zu installieren:

npm install

Starte dann deinen Dev-Server neu.

3. Aktualisiere die Versionen von React und React-Dom

Wenn der Fehler weiterhin besteht, aktualisiere deine Versionen von React und React-Dom mit den folgenden Befehlen:

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

Jetzt ist es sicher, dass der Fehler behoben wird.

Zusammenfassung

Der Fehler „React must be in scope when using JSX“ ist ein häufiges Problem, das Entwicklern bei der Arbeit mit React begegnen kann. Dieser Fehler tritt vor allem in früheren Versionen von React v17 auf, wenn die JSX-Syntax in einer Datei verwendet wird, die React-Bibliothek aber nicht richtig importiert oder eingebunden wird. Er tritt auch in höheren Versionen von React v17 auf, wenn ESLint-Konfigurationen den Fehler auslösen oder wenn einige Abhängigkeiten in deinem node_modules-Ordner falsch installiert sind.

Je nachdem, mit welcher React-Version du arbeitest, gibt es verschiedene Möglichkeiten, um diesen Fehler zu beheben, die wir in diesem Artikel beschrieben haben.

Jetzt bist du dran: Bist du schon einmal auf dieses Problem gestoßen? Wie hast du es gelöst? Gibt es noch andere Lösungsansätze, die du benutzt hast und die nicht in diesem Artikel beschrieben sind? Lass es uns in den Kommentaren wissen!