• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

834
Views
'Reaccionar' se usó antes de que se definiera

Estoy trabajando con la aplicación create-react-app + typescript + eslint y durante la compilación tengo este error:

 Line 1:8: 'React' was used before it was defined @typescript-eslint/no-use-before-define

El código en mi componente comienza con:

 import React from "react";

Configuración de Eslint:

 module.exports = { parser: "@typescript-eslint/parser", parserOptions: { ecmaVersion: 2020, sourceType: "module", ecmaFeatures: { jsx: true } }, settings: { react: { version: "detect" } }, extends: [ "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], rules: { "@typescript-eslint/explicit-module-boundary-types": 0, "@typescript-eslint/triple-slash-reference": 0, "no-use-before-define": "off", "@typescript-eslint/no-use-before-define": "off" }, };

Alguna parte de package.json:

 "devDependencies": { "@typescript-eslint/eslint-plugin": "^4.1.0", "@typescript-eslint/parser": "^4.1.0", "babel-eslint": "^10.1.0", "eslint": "^6.6.0", "eslint-config-airbnb": "^18.1.0", "eslint-config-prettier": "^6.11.0", "eslint-plugin-import": "^2.20.2", "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-react": "^7.20.0", "prettier": "^2.0.5", "start-server-and-test": "^1.11.3" }, "dependencies": { ... "react-scripts": "3.4.3", ... }

Lo intenté:

  • Lea https://github.com/typescript-eslint/typescript-eslint/issues/2502
  • Deshabilite @typescript-eslint/no-use-before-define y no-use-before-define en .eslintrc.js
  • En realidad, traté de eliminar .eslintrc.js, pero tuve el mismo error.
about 3 years ago · Santiago Trujillo
17 answers
Answer question

0

Recibí este error del conjunto de reglas airbnb-base en un proyecto de mecanografiado. También extendiendo airbnb-typescript (que tiene las reglas correctas para mecanografiado) resolvió el problema.

about 3 years ago · Santiago Trujillo Report

0

Esto se ha resuelto en 4.4.0. Actualice estas dependencias a la versión 4.4.0

Actualización: Esto puede funcionar para algunos casos de uso. Esto resolvió mi problema.

 "@typescript-eslint/eslint-plugin": "^4.4.0", "@typescript-eslint/parser": "^4.4.0",
about 3 years ago · Santiago Trujillo Report

0

Mi solución para eso: usar eslint 6 como scripts de reacción es usar scripts de Force react para usar paquetes @typescript-eslint más nuevos como el resto del repositorio. Estoy usando resolución selectiva aquí

 "resolutions": { "**/react-scripts/**/@typescript-eslint/eslint-plugin": "^4.4.1", "**/react-scripts/**/@typescript-eslint/parser": "^4.4.1" }

@typescript-eslint 4.x todavía es compatible con es6

about 3 years ago · Santiago Trujillo Report

0

Aterricé en esta página después de que comencé a tener problemas con un proyecto de Gatsby que usaba Typescript y una configuración de ESLint que extendía eslint-config-airbnb-typescript . Además del error de OP, ESLint también estaba dando errores en varias reglas que no estaban definidas, como Definition for rule '@typescript-eslint/no-redeclare' was not found. y algunos otros

El problema subyacente terminó siendo que Gatsby estaba usando versiones bastante antiguas de @typescript-eslint/eslint-plugin y @typescript-eslint/parser . Obligar a yarn a instalar solo versiones actualizadas resolvió el problema:

 // package.json "resolutions": { "@typescript-eslint/eslint-plugin": "^4.4.0", "@typescript-eslint/parser": "^4.4.0" }
about 3 years ago · Santiago Trujillo Report

0

Si solo recibe este error para archivos .js , asegúrese de que @typescript-eslint/parser se use exclusivamente en archivos Typescript.

.eslintrc.json (abreviado)

 { "overrides": [ { "files": ["**/*.ts", "**/*.tsx"], "plugins": ["@typescript-eslint"], "rules": { "no-use-before-define": "off", "@typescript-eslint/no-use-before-define": ["error"], }, } ], // WRONG: Do not use @typescript-eslint/parser on JS files // "parser": "@typescript-eslint/parser", "plugins": [ "react", // "@typescript-eslint" ], }
about 3 years ago · Santiago Trujillo Report

0

Intente agregar import/resolver a su configuración de Eslint :

 "settings": { "react": { "version": "detect" }, "import/resolver": { "typescript": {} } }

Tal vez necesites instalarlo también:

 $ yarn add -D eslint-import-resolver-typescript

Si eso no funciona, podrías cambiar esta regla.

 "@typescript-eslint/no-use-before-define": "off"

Me gusta esto:

 "no-use-before-define": "off"
about 3 years ago · Santiago Trujillo Report

0

Así resolví mi problema.

  1. En primer lugar, vaya a node_modules/react-scripts/config/webpack.config.js y cambie el caché a falso, porque esto lo ayudará a comprender qué funciona y qué no, luego de cambiar el archivo eslint. lo encontre aqui
 cache: true, // You can set it to false formatter: require.resolve('react-dev-utils/eslintFormatter'),
  1. Agregue la variable ENV al archivo .env. Más información
 EXTEND_ESLINT=true
  1. A partir de ahora, CRA tendrá que usar su eslint local para eliminar pelusas durante su compilación y tenemos control para deshabilitar algunas reglas, en mi caso en .eslintrc:
 rules: { "@typescript-eslint/no-use-before-define": "off" },
about 3 years ago · Santiago Trujillo Report

0

Es un tema presente en ESLINT.

La forma en que resuelvo es agregar las siguientes líneas a ESLINT/rules :

"no usar antes de definir": [0],
"@ mecanografiado-eslint / sin uso antes de definir": [1],

about 3 years ago · Santiago Trujillo Report

0

Eliminé los paquetes @typescript-eslint/eslint-plugin y @typescript-eslint/parser de mi package.json , eliminé node_modules y package-lock.json , reinstalé los paquetes: npm install El error desapareció.

ACTUALIZAR

Después de eso, create-react-app usa su propio módulo @typescript-eslint/eslint-plugin que está en desuso.

about 3 years ago · Santiago Trujillo Report

0

Solo quería agregar eso para mí, hice lo siguiente.

  1. Se eliminaron todas las dependencias relacionadas con eslint de package.json si ya estaban incluidas en package-lock.json por react-scripts (para mí, eran todas)
  2. Eliminé mi carpeta node_modules y el archivo package-lock.json
  3. npm install

Después de completar esos pasos, finalmente logré que el error desapareciera. Prefiero eliminar las dependencias a degradarlas, ya que esto ayudará a evitar que vuelva a ocurrir el mismo problema en el futuro.

about 3 years ago · Santiago Trujillo Report

0

El error ocurre debido a la falta de coincidencia de las versiones de @typescript-eslint en react-scripts y su package.json - Problema de GitHub

Puede degradar los paquetes hasta que react-scripts actualice su versión.

 "@typescript-eslint/eslint-plugin": "4.0.1", "@typescript-eslint/parser": "4.0.1",

EDITAR 2020-09-14

Parece que el error no está relacionado con la versión de react-scripts de @typescript-eslint ya que varias personas informaron el mismo error sin usar react-scripts .

De todos modos, la solución sigue siendo la misma: cambie a la versión funcional de @typescript-eslint hasta que la solución esté disponible.

EDITAR 2020-10-24

react-scripts@4.0.0 se ha publicado con @typescript-eslint . El uso de la versión más reciente debería resolver el problema.

EDITAR 2020-11-04

Si después de actualizar los paquetes el error sigue ahí, lo más probable es que su configuración de eslint use la regla incorrecta. Mira la respuesta de Igor para arreglarlo.

about 3 years ago · Santiago Trujillo Report

0

(No hay suficiente representante para comentar)

La solución de @ sashko parece funcionar: también era necesario eliminar node_modules .

Una cosa que extrañé fue el signo de intercalación en "^4.0.1" . La versión debe corregirse sin el signo de intercalación ^ , que parece ser el problema que tiene @Rolly. Asegúrate de que sea 4.0.1 .

Solo una solución alternativa hasta react-scripts se actualice a v4 (estoy usando create-react-app )

about 3 years ago · Santiago Trujillo Report

0

eliminar la carpeta node_modules y reinstalarla funcionó para mí. Estoy usando yarn como administrador de paquetes.

about 3 years ago · Santiago Trujillo Report

0

De la documentación oficial .

 "rules": { // note you must disable the base rule as it can report incorrect errors "no-use-before-define": "off", "@typescript-eslint/no-use-before-define": ["error"] }
about 3 years ago · Santiago Trujillo Report

0

Intente usar Yarn en lugar de NPM (asegúrese de eliminar sus node_modules en el medio).

Esto funcionó para mí.

about 3 years ago · Santiago Trujillo Report

0

Sé que esta publicación no resuelve el problema directamente, pero puede evitarlo si sigue las mejores prácticas con respecto a las importaciones. Intente importar exactamente lo que desea y también eliminará este error. Por ejemplo:

 import { useState, useEffect } from React; // and then continue with your code
about 3 years ago · Santiago Trujillo Report

0

Si usa la aplicación Create React. Obtener la última versión de react-scripts me solucionó este problema. Actualmente: 4.0.3

 // Get this specific version: npm uninstall react-scripts npm install react-scripts@4.0.3 // Get latest version: npm uninstall react-scripts npm install react-scripts
about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error