javascript - 'React' debe estar en el alcance cuando se usa JSX react/react-in-jsx-scope?

Soy un desarrollador de Angular y nuevo en React. Este es un componente simple de React pero no funciona

import react , { Component}  from 'react';
import         { render   }  from 'react-dom';

class TechView extends Component {

    constructor(props){
       super(props);
       this.state = {
           name:'Gopinath'
       }
    }
    render(){
        return(
            <span>hello Tech View</span>
        );
    }
}

export default TechView;

Error : 'React' debe estar en el ámbito al usar JSX react/react-in-jsx-scope

Respuesta #1

La línea de importación debería ser:

import React, { Component }  from 'react';

Nota la R mayúscula de React.

Respuesta #2

Agrega la siguiente configuración en .eslintrc.js/.eslintrc.json para ignorar estos errores:

  rules: {
    // suppress errors for missing 'import React' in files
   "react/react-in-jsx-scope": "off",
    // allow jsx syntax in js files (for next.js project)
   "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], //should add ".ts" if typescript project
  }

¿Por qué? Si estás usando NEXT.js, entonces no necesitas importar React al inicio de los archivos, Next.js lo hace por ti.

Ref: https://gourav.io/blog/nextjs-cheatsheet (chuleta de Next.js)

Respuesta #3

Si estás usando React v17, puedes desactivar la regla de manera segura en tu archivo de configuración de eslint:

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

Respuesta #4

Para aquellos que aún no entienden la solución aceptada:

Agregar

import React from 'react'
import ReactDOM from 'react-dom'

en la parte superior del archivo.

Respuesta #5

Si estás usando React 17+ (y en 2022, supongo, que lo estás) - necesitas añadir la siguiente línea a tu .eslintrc:

{
  "extends": ["plugin:react/jsx-runtime"]
}

Luego, solo importa React una vez en tu archivo de nivel superior, como App.jsx, y no necesitas importarlo en ningún otro lugar, a menos que necesites una API como useEffect, etc.

Respuesta #6

Tuve un problema similar.

Se solucionó después de que agregué el código a continuación en el componente principal: App.js. Si tienes otros componentes, asegúrate de importar React en esos archivos también.

import React from "react";

Respuesta #7

Para mí, tuve este problema una vez que usé npm audit fix --force, así que degradó react-scripts a la versión 2 y me obligó a instalar eslint versiones 5 y los problemas comenzaron a aparecer, para solucionar esto tuve que actualizar de nuevo react-scripts y las cosas funcionaron. También asegúrate de que tu eslint contenga esas reglas

module.exports = {
  extends: ['react-app', 'react-app/jest', 'airbnb', 'prettier'],
  plugins: ['prettier'],
  rules: {
    ...
    // React scope no longer necessary with new JSX transform
    'react/react-in-jsx-scope': 'off',
    // Allow .js files to use JSX syntax
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    ...
  },
}

Respuesta #8

agrega "plugin:react/jsx-runtime" a extends en tu archivo de configuración de eslint, consulta react-in-jsx-scope