He estado luchando toda la mañana con este problema y no pude encontrar la solución en ningún lado. Soy nuevo en mecanografiar y estoy tratando de configurarlo correctamente con Eslint y Prettier para asegurarme de que el código tenga el formato correcto.
Entonces, el problema al que me enfrento al crear componentes funcionales. Según la hoja de trucos, estoy tratando de exportar un componente simple como:
import React from "react"; type DivProps = { text: string; }; const Div = ({ text }: DivProps): JSX.Element => (<div>{text}</div>) export default Div;Sin embargo, eslint se queja y dice que "el componente de función no es una expresión de función".
Al ejecutar la corrección, convertirá mi función en una función sin nombre:
const Div = function ({ text }: DivProps): JSX.Element { return <div>{text}</div>; };Y luego se quejará diciendo "Función sin nombre inesperada".
Incluso si trato de refactorizar la función para:
function Div({ text }: DivProps): JSX.Element { return <div>{text}</div>; };Sigo recibiendo el mismo error que dice que "El componente de función no es una expresión de función".
Mi archivo .eslintrc.js es:
module.exports = { env: { browser: true, es2021: true, }, extends: ["airbnb", "plugin:@typescript-eslint/recommended", "prettier"], parser: "@typescript-eslint/parser", parserOptions: { ecmaFeatures: { jsx: true, }, ecmaVersion: 12, sourceType: "module", }, plugins: ["@typescript-eslint", "react-hooks", "prettier"], rules: { "react-hooks/rules-of-hooks": "error", "prettier/prettier": "error", "no-use-before-define": "off", "@typescript-eslint/no-use-before-define": ["error"], "react/jsx-filename-extension": [ 1, { extensions: [".tsx"], }, ], "import/prefer-default-export": "off", "import/extensions": [ "error", "ignorePackages", { ts: "never", tsx: "never", }, ], }, settings: { "import/resolver": { typescript: {}, }, }, };¡Agradezco cualquier ayuda en esto!
PD: Si ve alguna otra cosa que modificaría/mejoraría en el archivo eslintrc, hágamelo saber. Como mencioné, soy nuevo en TypeScript, por lo que todavía estoy tratando de encontrar las mejores opciones para la pelusa.
¡Salud!
Alejandro
Actualización FINAL: esto se ha corregido como eslint-config-airbnb versión 19.0.4
Lo mejor que puede hacer es actualizar su copia de ese paquete a 19.0.4 o superior.
Actualización anterior: esto es en realidad un error en las versiones de configuración de airbnb 18.2.1 a 19.0.2
La configuración correcta debería ser function-declaration , por lo que la solución correcta es anular la regla en su .eslintrc.js
"react/function-component-definition": [ 2, { namedComponents: "function-declaration", }, ], ^ Actualmente había un PR abierto y un PR ahora fusionado para hacer ese parche en la configuración de airbnb de forma predeterminada, por lo que este cambio hará que su proyecto sea consistente con la configuración prevista.
Nota: Es posible que desee considerar navegar hasta el problema relevante y votarlo para que los mantenedores sepan que está lidiando con él.
Ahora que esto se ha resuelto, debe actualizar su versión a 19.0.4 o superior.
Otra opción: degradar las reglas de airbnb
Como se menciona en otra respuesta : si lo prefiere, también puede degradar su versión de las reglas de airbnb antes de que se introdujera la regla "mala" (v18.2.1 es la última versión sin esta regla). Esto se hace actualizando su paquete.json:
"devDependencies": { ... "eslint-config-airbnb": "^18.2.1" }Tenga en cuenta que esto significa que su proyecto no utilizará la última guía de estilo de airbnb, por lo que puede decidir que es preferible simplemente anular la regla.
Mi respuesta anterior, que creará un código "válido" según el linter:
También enfrenté este problema; Pude descubrir cómo escribir un código que se adhiera a las reglas de airbnb, pero... El resultado me parece bastante incómodo y no estoy muy seguro de por qué sería el resultado preferido.
Según las reglas predeterminadas, debe (A) definir su componente usando una expresión de función, pero también (B) no puede usar funciones anónimas (esto es para evitar la "función anónima" en los seguimientos de pila), por lo que también debe nombra la función:
const MyComponent = function MyComponent() { ... }Así que usando tu ejemplo:
const Div = function Div({ text }: DivProps): JSX.Element { return <div>{text}</div>; };Esto satisface el linter pero... Vaya, ¿verdad?
Ok, entonces no sé si es la respuesta correcta, pero finalmente cambiar la configuración en Eslint me ayudó a cambiar el tipo de función para Componentes. Agregué la siguiente regla a mi archivo .eslintrc.js:
"react/function-component-definition": [ 2, { namedComponents: "arrow-function", unnamedComponents: "arrow-function", }, ],Con esto, eslint SÓLO aceptará funciones de flecha para Componentes, en lugar de expresiones de función (por defecto).
La edición de las siguientes dependencias en package.json funcionó para mí
"devDependencies": { "eslint-config-airbnb": "^18.1.0"}Gracias por la respuesta actualizada @ https://stackoverflow.com/a/70051760/9558119 , estuve atrapado aquí durante días