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é:
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"] }
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.
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" ], }