Failed to compile. ./node_modules/react-intl/dist/components/message.mjs Can’t import the named export ‘Component’ from non EcmaScript mo...

Hola matias, cuando hagas la instalacion en consola de chakra-ui deja las especificaciones de version, tal como te lo provee la documentacion original de la pagina, esto es porque las nuevas versiones suelen traer algunos cambios y suelen tener ese tipo de errores

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Hola Gabriel, mira, copie el codigo tal cual y funciona.. pero cuando pongo la linea de: import { ChakraProvider } from "@chakra-ui/react";

me falla la compilacion con este error :

Failed to compile ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs Can't import the named export 'Children' from non EcmaScript module (only default export is available)

... sin importar lo de chakra me funciona, voy a tratrar de seguir con el curso sin usarlo hasta poder solucionarlo, gracias.

Vuelvo a subir el codigo con la actualización porque se fueron los espacios en las citas 🤔

import { Routes, Route } from "react-router-dom";
import Home from "./views/home";

function App() {
  return (
    <>
    <Routes>

      <Route path="/" element={<Home />} />
      </Routes>
    </>
  );
}

export default App;```

El error es porque acaba de cambiar la version de react-router-dom de la version 5 a la 6. Para solucionar el error, hay que modificar como se llama a react-router-dom.

++Así es como hacen el llamado en la clase (en el archivo App.js):++

import { Route } from "react-router-dom";
import Home from "./views/home";

function App() {
  return (
    <>
      <Route path="/" exact component={Home} />
    </>
  );
}

export default App;

Tenes que corregirlo de esta forma para que lo tome la nueva versión:

import { Routes, Route } from "react-router-dom";
import Home from "./views/home";

function App() {
  return (
    <>
    <Routes>
      <Route path="/" element={<Home />} />
      </Routes>
    </>
  );
}

export default App;

Que cambio?

En la version 6, los Route components necesitan renderizarse dentro de un componente de rutas. Creo que una forma facil de decirlo es que "route" es si o si children de "routes". Esto es un upgrade del componente switch de la v5.

Entonces, en el import solicitamos Routes y Route, al llamar a "Route" debemos ponerlo en el contexto de "Routes" y, en vez de "exact component" debe citarse como "element". Otro detalle, donde llamamos a "Home" cambia de {Home} a {<Home/>} . Listo, problema solucionado! Ya pueden ver el Hello World sin problemas 🎉