Att arbeta med React kan ibland vara svårt, särskilt när det gäller fel som inte alltid är lätta att förstå.

Ett vanligt fel som utvecklare kan stöta på är felet ”React must be in scope when using JSX”. Det här felet uppstår när React inte importeras eller initieras korrekt i en komponent som använder JSX-syntax.

I den här artikeln kommer vi att diskutera orsakerna till det här felet och sedan ge lösningar på hur man åtgärdar det.

Vad orsakar felet ”react must be in scope when using jsx”?

JSX (JavaScript XML) är ett syntaxtillägg som exempelvis gör att du kan skriva HTML-liknande kod i JavaScript. Webbläsare förstår inte JSX. Förkonfigurerade verktygslådor som Create React App innehåller dock ett JSX-omvandlingsverktyg under huven som omvandlar JSX-koden till giltig JavaScript-kod som kan tolkas av webbläsare.

I React-versioner före 17.0 omvandlades JSX till React.createElement()-funktionsanrop av JSX-transformatorn vid kompileringstiden. Detta krävde exempelvis att React importerades för att React-elementen skulle fungera. Med införandet av en ny JSX-transformator i React v17.0 importeras dock särskilda funktioner från React-paketets nya ingångspunkter automatiskt. Som ett resultat elimineras behovet av att importera React i varje fil som använder JSX explicit.

Som exempel kan vi ta en titt på följande funktionskomponent:

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

Vid kompilering omvandlas den till vanlig JavaScript:

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

Eftersom React är odefinierat kommer detta alltid att ge felet ”’React must be in scope when using JSX”.

2 sätt att åtgärda felet ”react must be in scope when using jsx”

Det här felet kan åtgärdas på några olika sätt beroende på vilken version av React som du använder.

  • Före React v17
  • React v17 och högre

1. Inkludera eller korrigera React-importdeklarationen (fix för före React v17)

Om du använder en äldre version av React kan det hända att du saknar eller har en felaktig importdeklaration för ”react”. Kontrollera att du har rätt importdeklaration högst upp i filen (med ett stort ”R” på ”React”):

// Wrong ❌
import react  from 'react';

// Correct ✅
import React  from 'react';

Din funktionella komponent kommer nu att se ut så här när den omvandlas till vanlig JavaScript:

import React  from 'react';

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

2. Uppdatera ESLint-konfigurationen (fix för React v17 och högre)

I React v17.0 infördes en ny JSX-transform som automatiskt importerar specialfunktioner från React-paketets nya ingångspunkter. Som ett resultat behöver du inte importera React i varje fil som uttryckligen använder JSX.

Ta exempelvis följande funktionella komponent:

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

Det här är vad den nya JSX-transformen kompilerar den till:

// 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 att du inte längre behöver importera React i dina komponenter för att använda JSX. Fortsätter du att möta det här felet även efter att ha kontrollerat din package.json-fil för att bekräfta din React-version? Då måste du uppdatera dina ESLint-konfigurationer.

I det här skedet är detta tekniskt sett inte längre ett React-fel utan snarare ett ESLint-fel.

Obs: Du använder ofta linting-verktyg som ESLint i ditt React-projekt. Det kontrollerar nämligen din kod för att upptäcka potentiella fel som antingen kan krascha din kod nu eller i framtiden. Det här verktyget tvingar dig att importera React när det upptäcker någon JSX runt filen.

När du är säker på att din React-version är v17.0 eller högre är det säkert att inaktivera reglerna som ser till att du importerar React när du använder JSX.

Det finns två huvudsakliga sätt att uppdatera ESLint-konfigurationer. Om du har en .eslintrc.js eller .eslintrc.json-fil: Lägg till följande regler i din .eslintrc.js-fil.

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

Annars kan du uppdatera 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 koden ovan är regeln react-in-jsx-scope avstängd. Som ett resultat kommer ESLint inte att skapa fel när du inte lyckas importera React.

Vid det här laget borde du ha åtgärdat felet ”react must be in scope when using jsx” en gång för alla. Men det kan hända att något kom i vägen för dig och att felet fortfarande finns kvar.

Låt oss ta en titt på ytterligare några sätt för dig att försöka åtgärda detta.

Ytterligare 3 sätt att åtgärda felet ”react must be in scope when using jsx”

Anta att felet fortfarande kvarstår. Här är ytterligare tre sätt att åtgärda felet ”react must be in scope when using jsx”.

1. Uppdatera versionen av React-skripten

Du kan uppdatera versionen av ditt projekts react-scripts genom att köra följande kommando i din terminal:

// npm
npm install react-scripts@latest

// yarn
yarn add react-scripts@latest

2. Ta bort mappen Node_modules och filen package-lock.json

Om felet kvarstår är det möjligt att några av dina beroenden är felaktigt installerade. Du kan åtgärda detta genom att radera mappen node_modules och filen package-lock.json (inte package.json). Kör sedan följande kommando för att installera paketen på nytt:

npm install

Starta sedan om din dev-server.

3. Uppdatera versionerna av React och React-Dom

Om felet kvarstår uppdaterar du slutligen dina versioner av react och react-Dom med hjälp av kommandona nedan:

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

Vid denna tidpunkt är det säkert att felet kommer att åtgärdas.

Sammanfattning

Felet ”React must be in scope when using JSX” är ett vanligt problem som utvecklare kan stöta på när de arbetar med React. Det här felet förekommer främst i tidigare versioner av React v17 när JSX-syntaxen används i en fil. React-biblioteket importeras eller inkluderas helt enkelt inte på rätt sätt. Det förekommer dessutom i högre versioner av React v17 när ESLint-konfigurationer visar felet eller när vissa beroenden i mappen node_modules är felaktigt installerade.

Beroende på vilken React-version som du arbetar med finns det olika sätt att åtgärda det här felet, vilket vi beskrev i artikeln.

Nu är det din tur: Har du någonsin stött på det här problemet? Hur löste du det? Finns det några andra tillvägagångssätt som inte tas upp i den här artikeln? Berätta för oss i kommentarerna!