Estoy construyendo mi primera aplicación expo/react. Sigo recibiendo un mensaje de error "Token inesperado" en App.js:
export default class App extends React.Component { const [message, setMessage] = useState("...");
el error está en el [
de la línea que comienza const
.
Lo mejor que puedo decir es que este es un problema de babel: esta sintaxis se introdujo en ES2015. AFAICS, esto debería resolverse agregando @babel/preset-env a babel.config.js así:
module.exports = function(api) { api.cache(true); return { presets: [ '@babel/react', '@babel/env', ], plugins: [ '@babel/proposal-class-properties', ], }; };
¡La agrupación tiene éxito, pero el error persiste! ¿Qué me estoy perdiendo?
El error no se debe a que esté tratando de usar la desestructuración de matrices en general, sino a que lo está haciendo dentro del cuerpo de una clase (donde solo puede declarar propiedades).
Los React Hooks solo son compatibles con los componentes Function de todos modos. No puede usarlos en componentes de clase.
Por lo tanto, debe usar la sintaxis del componente de función.
const App = () => { const [message, setMessage] = useState("..."); // ... } export default App;
Otras lecturas: