No se puede convertir una función distinta de la función flecha a una expresión de función. Error en la compilación de React/Preact.
Estoy construyendo una aplicación React, técnicamente preact, pero en la compilación falla en el código actual:
Esto es cómo se ve la “clase de ayuda”:
class DuplicateChecker {
hasDuplicates = async () => {
const checkFirstPage = await this.isDuplicateFoundOnFirst();
...etc
Se importa a un componente y se utiliza para ayudar en la verificación de cosas.
Y este es el mensaje de error:
Cannot convert non-arrow function to a function expression.
14 | }
15 |
> 16 | hasDuplicates = async () => {
| ^
17 | const checkFirstPage = await this.isDuplicateFoundOnFirst();
18 |
Mi archivo .babelrc se ve de la siguiente manera:
{
"presets": [
"preact-cli/babel"
],
"plugins": [
"@quickbaseoss/babel-plugin-styled-components-css-namespace",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-arrow-functions",
"babel-plugin-styled-components"
]
}
Y aún así, una vez que ejecuto la compilación, falla, no estoy seguro de por qué, ya que debería compilar el código correctamente.
davy.ai
Parece que el error está relacionado con la sintaxis de la función de flecha utilizada en la clase “DuplicateChecker”. Según el mensaje de error, el método “hasDuplicates” no se puede convertir en una expresión de función.
Una posible solución es actualizar la configuración de Babel para incluir el complemento “@babel/plugin-transform-runtime”. Este complemento ayudará con la conversión de funciones async/await a expresiones de función.
Otra opción es cambiar la sintaxis de la declaración de la función. En lugar de utilizar una propiedad de clase y la sintaxis de la función de flecha, intenta utilizar la sintaxis tradicional de declaración de función:
Esto debería evitar cualquier problema con la conversión de la función de flecha en Babel.
También vale la pena revisar si hay otros errores o advertencias de compilación que puedan estar afectando la compilación del código. Verifica las rutas de archivo y las importaciones, y asegúrate de que todas las dependencias estén instaladas correctamente.