Det kan nogle gange være svært at arbejde med React, især når der er tale om fejl, som ikke altid er lette at forstå.

En almindelig fejl, som udviklere kan støde på, er fejlen “React must be in scope when using JSX”. Denne fejl opstår, når React ikke er korrekt importeret eller initialiseret i en komponent, der bruger JSX-syntaks.

I denne artikel vil vi diskutere årsagerne til denne fejl og give løsninger på, hvordan du løser den.

Hvad er årsagen til fejlen “react must be in scope when using jsx”?

JSX (JavaScript XML) er en syntaksudvidelse, der gør det muligt at skrive HTML-lignende kode i JavaScript. Browsere forstår ikke JSX, men forudkonfigurerede værktøjssæt som Create React App indeholder et JSX-transformationsværktøj under motorhjelmen, der konverterer JSX-koden til gyldig JavaScript-kode, som kan fortolkes af browsere.

I React-versioner før 17.0 blev JSX transformeret til React.createElement() -funktionskald af JSX-transformeren på kompileringstidspunktet. Dette krævede import af React for at få React-elementerne til at fungere. Med indførelsen af en ny JSX-transform i React v17.0 importeres særlige funktioner fra React-pakkens nye indgangspunkter automatisk, hvilket eliminerer behovet for at importere React i hver fil, der eksplicit bruger JSX.

Lad os som eksempel tage et kig på følgende funktionelle komponent:

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

På kompileringstidspunktet omdannes den til almindelig JavaScript:

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

Da React er udefineret, vil dette altid give fejlen “‘React must be in scope when using jsx”.

2 måder at rette fejlen “react must be in scope when using jsx” på

Denne fejl kan rettes på et par måder, afhængigt af hvilken version af React du bruger.

  • Før React v17
  • React v17 og højere

1. Medtag eller korriger React-importdeklaration (rettelse for før React v17)

Hvis du bruger en ældre version af React, mangler du muligvis en importdeklaration for “react” eller har en forkert importdeklaration. Sørg for, at du har den korrekte importdeklaration øverst i din fil (med et stort “R” på “React”):

// Wrong ❌
import react  from 'react';

// Correct ✅
import React  from 'react';

Din funktionelle komponent vil nu se sådan ud, når den omdannes til almindelig JavaScript:

import React  from 'react';

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

2. Opdatering af ESLint-konfiguration (rettelse til React v17 og højere)

I React v17.0 blev der indført en ny JSX-transformation, som automatisk importerer særlige funktioner fra React-pakkens nye indgangspunkter, hvilket fjerner behovet for at importere React i hver fil, der eksplicit bruger JSX.

Tag f.eks. følgende funktionelle komponent:

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

Dette er, hvad den nye JSX-transformation kompilerer den til:

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

Det betyder, at du ikke længere behøver at importere React i dine komponenter for at bruge JSX. Hvis du bliver ved med at få denne fejl, selv efter at du har kontrolleret din package.json-fil for at bekræfte din React-version, skal du opdatere dine ESLint-konfigurationer.

På dette tidspunkt er dette teknisk set ikke længere en React-fejl, men snarere en ESLint-fejl.

Bemærk: Du bruger ofte linting-værktøjer som ESLint i dit React-projekt, fordi det kontrollerer din kode for at opdage potentielle fejl, der kan ødelægge din kode enten nu eller i fremtiden. Dette værktøj tvinger dig til at importere React, når det registrerer JSX rundt omkring i filen.

Når du er sikker på, at din React-version er v17.0 eller højere, er det sikkert at deaktivere de regler, der sikrer, at du importerer React, når du bruger JSX i din React.

Der er to hovedmetoder til at opdatere ESLint-konfigurationer. Hvis du har en .eslintrc.js eller .eslintrc.json-fil. Tilføj følgende regler til din .eslintrc.js-fil.

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

Ellers kan du opdatere eslintConfig -objektet i din package.json-fil:

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

I ovenstående kode er react-in-jsx-scope-reglen slået fra, så ESLint ikke kaster fejl, når du ikke importerer React.

På dette tidspunkt burde du have rettet fejlen “react’ must be in scope when using jsx” én gang for alle. Men det kan være, at der er kommet noget i vejen for dig, og at fejlen stadig er der.

Lad os tage et kig på et par flere måder, hvorpå du kan forsøge at løse den.

Yderligere 3 måder at rette fejlen “react must be in scope when using jsx” Error

Antag, at fejlen stadig består. Her er tre yderligere måder at rette fejlen “react’ must be in scope when using jsx” på.

1. Opdater versionen af React-skripts

Du kan opdatere versionen af dit projekts react-scripts ved at køre følgende kommando i din terminal:

// npm
npm install react-scripts@latest

// yarn
yarn add react-scripts@latest

2. Slet Node_modules-mappen og filen package-lock.json

hvis fejlen fortsætter, er det muligt, at nogle af dine afhængigheder er forkert installeret. Du kan løse dette ved at slette din mappe node_modules og filen package-lock.json (ikke package.json). Kør derefter følgende kommando for at installere pakkerne på ny:

npm install

Genstart derefter din dev-server.

3. Opdater versionerne af React og React-Dom

Hvis fejlen fortsætter, skal du endelig opdatere dine versioner af react og react-dom ved hjælp af nedenstående kommandoer:

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

På dette tidspunkt er det sikkert, at fejlen vil blive rettet.

Opsummering

Fejlen “React must be in scope when using JSX” er et almindeligt problem, som udviklere kan støde på, når de arbejder med React. Denne fejl opstår hovedsageligt i tidligere versioner af React v17, når JSX-syntaksen bruges i en fil, men React-biblioteket ikke er korrekt importeret eller inkluderet. Den forekommer også i højere versioner af React v17, når ESLint-konfigurationer kaster fejlen, eller når nogle afhængigheder i din node_modules-mapper forkert installeret.

Baseret på den React-version, du arbejder med, vil der være forskellige måder, du kan bruge til at rette denne fejl, som vi skitserede i artiklen.

Nu er det din tur: Er du nogensinde stødt på dette problem? Hvordan har du løst det? Er der andre metoder, du har brugt, som ikke er dækket i denne artikel? Lad os vide det i kommentarerne!