Trabalhar com React pode ser um pouco complicado às vezes, especialmente ao lidar com erros que nem sempre são fáceis de entender.

Um erro comum que os desenvolvedores podem encontrar é o erro “React must be in scope when using JSX”. Esse erro ocorre quando o React não é importado ou inicializado corretamente em um componente que utiliza a sintaxe JSX.

Neste artigo, discutiremos as causas deste erro e forneceremos soluções sobre como corrigi-lo.

O que causa o erro “React must be in scope when using JSX”?

JSX (JavaScript XML) é uma extensão de sintaxe que permite escrever código semelhante a HTML em JavaScript. Os navegadores não entendem JSX, mas frameworks pré-configurados como o Create React App incluem uma ferramenta de transformação de JSX nos bastidores que converte o código JSX em código JavaScript válido, que pode ser interpretado pelos navegadores.

Nas versões anteriores ao React 17.0, o JSX era transformado em chamadas de função React.createElement() pelo transformador de JSX em compile-time. Isso exigia a importação do React para que os elementos do React funcionassem corretamente. Com a introdução de uma nova transformação de JSX no React v17.0, funções especiais dos novos pontos de entrada do pacote React são importadas automaticamente, eliminando a necessidade de importar explicitamente o React em cada arquivo que usa JSX.

Como exemplo, vamos dar uma olhada no seguinte componente funcional:

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

Durante o tempo de compilação (compile-time), ele é transformado em JavaScript regular:

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

Como React é indefinido, isso sempre causará o erro “‘react’ must be in scope when using jsx.”

2 maneiras de corrigir o erro “React must be in scope when using JSX”

Este erro pode ser corrigido de algumas maneiras, dependendo da versão do React que você está usando.

  • Antes do React v17
  • React v17 e superior

1. Inclua ou corrija a declaração de importação do React (Correção para versões anteriores ao React v17)

Se você estiver usando uma versão mais antiga do React, pode estar faltando ou ter uma declaração de importação incorreta para ‘react’. Certifique-se de ter a declaração de importação correta no topo do seu arquivo (com a letra “R” maiúscula em “React”):

// Wrong ❌
import react  from 'react';

// Correct ✅
import React  from 'react';

Seu componente funcional ficará assim quando transformado em JavaScript regular:

import React  from 'react';

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

2. Atualize a configuração ESLint (Correção para o React v17 e superior)

No React v17.0, uma nova transformação JSX foi introduzida, que importa automaticamente funções especiais dos novos pontos de entrada do pacote React, eliminando a necessidade de importar explicitamente o React em cada arquivo que usa JSX.

Por exemplo, considere o seguinte componente funcional:

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

Compile a nova transformação JSX assim:

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

Isso significa que você não precisa mais importar React em seus componentes para usar o JSX. Se você continuar recebendo este erro mesmo após verificar seu arquivo package.json para confirmar sua versão do React, você terá que atualizar suas configurações do ESLint.

Nesta etapa, tecnicamente não se trata mais de um erro do React, mas sim de um erro do ESLint.

Nota: Você costuma usar ferramentas de linting como o ESLint no seu projeto React, pois ele verifica seu código em busca de possíveis erros que possam quebrar o código agora ou no futuro. Essa ferramenta força você a importar o React quando detecta qualquer JSX no arquivo.

Quando você tem certeza de que sua versão do React é v17.0 ou superior, é seguro desabilitar as regras que exigem a importação do React ao usar JSX no seu projeto React.

Existem duas maneiras principais de atualizar as configurações do ESLint. Se você tiver um arquivo .eslintrc.js ou .eslintrc.json, adicione as seguintes regras ao seu arquivo .eslintrc.js:

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

Caso contrário, você pode atualizar o objeto eslintConfig em seu arquivo 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"
    }
  },
}

No código acima, a regra de reação no jsx escopo está desativada, assim a ESLint não vai lançar erros quando você não importar o React.

Neste ponto, você deve ter corrigido o erro “React Must be in Scope When Using JSX” de uma vez por todas. No entanto, pode haver casos em que o erro persiste e algo pode ter interferido em sua solução.

Vamos explorar mais algumas maneiras de tentar corrigi-lo:

3 maneiras adicionais para corrigir o erro “React must be in scope when using JSX”

Supondo que o erro ainda persista. Aqui estão três maneiras adicionais para corrigir o erro “React must be in scope when using JSX”.

1. Atualize a versão do React-Scripts

Você pode atualizar a versão do react-scripts do seu projeto executando o seguinte comando no terminal:

// npm
npm install react-scripts@latest

// yarn
yarn add react-scripts@latest

2. Exclua a pasta node_modules e o arquivo package-lock.json

se o erro persistir, então é possível que algumas de suas dependências estejam instaladas erroneamente. Você pode corrigir isso excluindo sua pasta node_modules e o arquivo package-lock.json (não package.json). Em seguida, execute o seguinte comando para instalar novamente as dependências:

npm install

Então reinicie seu servidor de desenvolvimento.

3. Atualize as versões do React e React-Dom

Finalmente, se o erro persistir, atualize as versões do React e React-Dom usando os comandos abaixo:

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

Neste ponto, você pode ter certeza de que esse erro está corrigido.

Resumo

O erro “React must be in scope when using JSX” é um problema comum que os desenvolvedores podem encontrar ao trabalhar com o React. Esse erro ocorre principalmente em versões anteriores do React v17 quando a sintaxe JSX é usada em um arquivo, mas a biblioteca React não está corretamente importada ou incluída. Também pode ocorrer em versões mais recentes do React v17 quando as configurações do ESLint geram o erro ou quando algumas dependências na pasta node_modules estão instaladas incorretamente.

Com base na versão do React com a qual você está trabalhando, existem diferentes maneiras de corrigir esse erro, conforme descrito no artigo.

Agora é a sua vez: Você já encontrou esse problema? Como você o resolveu? Existem outras abordagens que você utilizou e que não estão mencionadas neste artigo? Nos informe nos comentários!