Así que estamos usando la biblioteca de componentes geist en nuestra base de código. Está prácticamente integrado en partes de nuestra aplicación y, dado que esta biblioteca tiene 250 kb, está afectando la velocidad de nuestra página. Para eludir la importación de todo el módulo, la solución habitual es simplemente importar lo que necesita e, idealmente, nada debería fallar y todo debería funcionar como se espera.

 import { CssBaseline } from "@npkn/geist-react"

Hacer lo anterior debería funcionar, pero agrega 250 kb al paquete.

Otra forma de importar un componente sería importar el archivo específico. Obtengo dos opciones para importar el componente desde ESM o módulos dist.

 import CssBaseline from "@npkn/geist-react/dist/css-baseline"

y

 import CssBaseline from "@npkn/geist-react/esm/css-baseline/index"

Intenté hacer ambos pero el paquete web arroja errores. También intenté importar exportaciones con nombre, pero incluso entonces arroja un error.

 TypeError: _npkn_geist_react_dist_css_baseline__WEBPACK_IMPORTED_MODULE_0___default(...).flush is not a function 9 | static async getInitialProps(ctx) { 10 | const initialProps = await Document.getInitialProps(ctx) > 11 | const styles = CssBaseline.flush() | ^ 12 | 13 | return { 14 | ...initialProps,

Mi pregunta es ¿Estoy haciendo bien las importaciones o hay algo que me estoy perdiendo?

¡Gracias!