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-defineEl 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" ], }