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é:
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.
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",
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
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" }
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" ], }
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"
Así resolví mi problema.
cache: true, // You can set it to false formatter: require.resolve('react-dev-utils/eslintFormatter'),
EXTEND_ESLINT=true
rules: { "@typescript-eslint/no-use-before-define": "off" },
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],
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.
Solo quería agregar eso para mí, hice lo siguiente.
package.json
si ya estaban incluidas en package-lock.json
por react-scripts (para mí, eran todas)node_modules
y el archivo package-lock.json
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.
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.
(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
)
eliminar la carpeta node_modules
y reinstalarla funcionó para mí. Estoy usando yarn
como administrador de paquetes.
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"] }
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
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